Почему вы не можете использовать абсолютное позиционирование iframe для установки высоты/ширины

Мой вопрос похож на IFRAME и противоречивые абсолютные позиции, но я специально хочу знать ПОЧЕМУ, вы не можете установить как левый /right или top/bottom в 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 занимает полную высоту браузера. Высота iframe составляет 150 пикселей. Это то же самое в Chrome 17, Firefox 11 и IE9. Очевидно, что это не причуда браузера. Там что-то в спецификации HTML5, в которой говорится, что вы не можете установить как левое/правое, так и верхнее/нижнее на iframe, чтобы установить высоту.

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

Ответ 1

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 'Inline-block', замененные элементы в нормальном потоке

Ответ 2

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

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

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