Как вы даете iframe 100% высоту

Я пытаюсь

<iframe height="100%" ...>

но он по-прежнему не изменяет его размер. Когда я пытаюсь использовать высоту в пикселях, она работает.

edit: 100% похоже работает на IE, но не firefox

ОТВЕТЫ

Ответ 1

Вы можете сделать это с помощью CSS:

<iframe style="position: absolute; height: 100%; border: none"></iframe>

Помните, что по умолчанию это будет помещено в верхнем левом углу страницы, но я думаю, это то, чего вы хотите достичь. Вы можете позиционировать с помощью свойств left, right, top и bottom CSS.

Ответ 2

Проблема с iframe, не получающая 100% -ную высоту, не потому, что они громоздки. Проблема в том, что для получения 100% высоты им нужно, чтобы их родители имели высоту 100%. Если один из родителей iframe не высок на 100%, iframe не сможет выйти за пределы этой родительской высоты.

Таким образом, наилучшим решением может быть:

html, body, iframe { height: 100%; }

... если iframe находится непосредственно под телом. Если iframe имеет родительский элемент между собой и телом, iframe все равно получит высоту своего родителя. Нужно явно установить высоту каждого родителя на 100% (если это нужно).

Протестировано:

Chrome 30, Firefox 24, Safari 6.0.5, Opera 16, IE 7, 8, 9 and 10

PS: Я не хочу быть придирчивым, но решение, помеченное как правильно, не работает на Firefox 24 на момент написания этой статьи, но работало над Chrome 30. Однако не тестировались в других браузерах. Я столкнулся с ошибкой на Firefox, потому что на странице, которую я тестировал, было очень мало контента... Это может быть моя скудная разметка или CSS reset, изменяющая вывод, но если бы я испытал эту ошибку, я думаю, что принятый ответ не работает в любой ситуации.