почему вы не можете использовать абсолютное позиционирование iframe для установки высоты / ширины - PullRequest
14 голосов
/ 21 марта 2012

Мой вопрос похож на IFRAME и конфликтующие абсолютные позиции , но я специально хочу знать, ПОЧЕМУ вы не можете установить левое / правое или верхнее / нижнее в фреймеи заставить его работать.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
iframe { position: absolute; display: block; top: 0; bottom: 0; left: 10px; width:100px;   border: 1px solid black;}
div { position: absolute; display: block; top: 0; bottom: 0; left: 200px; width:100px;  border: 1px solid black;}
</style>
</head>
<body>
<iframe></iframe>
<div></div>
</body>
</html>

Div занимает всю высоту браузера.Высота фрейма 150px.То же самое в Chrome 17, Firefox 11 и IE9.Очевидно, это не причуда браузера.В спецификации HTML5 есть что-то, что говорит, что вы не можете установить и левое / правое или верхнее / нижнее в фрейме для установки высоты.

Что особенного в iframes (вместо divs)?

Ответы [ 2 ]

23 голосов
/ 21 марта 2012

Это просто не получится.Это способ создания iFrame.

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

Проблема решена.

20 голосов
/ 21 марта 2012

Iframes - это «замененные элементы» .

Они обрабатываются иначе, чем незаменяемые элементы.Не вдаваясь в подробности, просто посмотрите на содержание спецификации: http://www.w3.org/TR/CSS21/visudet.html

10.3 Расчет ширины и полей
10.3.1 Встроенные незаменяемые элементы
10.3.2Встроенные заменяемые элементы
10.3.3 Незаменяемые элементы блочного уровня в нормальном потоке
10.3.4 Заменяемые элементы блочного уровня в нормальном потоке
10.3.5 Плавающие незаменяемые элементы
10.3.6 Плавающие заменяемые элементы
10.3.7 Абсолютно позиционированные незаменяемые элементы // div
10.3.8 Абсолютно позиционированные заменяемые элементы // iframe
10.3.9 «Встроенный блок», незаменяемые элементы в нормальном потоке
10.3.10 «Встроенный блок», замененные элементы в нормальном потоке

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...