Может ли ребенок влиять на размер своего родителя в режиме стандартов?

Возьмем, к примеру, эту страницу, можно ли вставить ребенка в mydiv таким образом, чтобы рост mydiv превысил 500 пикселей?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
    <div id="mydiv" style="width:500px;height:500px;border:4px solid red">
        <!-- place content here -->
    </div>
</body>
</html>

Я не могу найти ничего, что будет. Например, в приведенной ниже ситуации я сказал, что innerDiv имеет высоту 100%. Он обнаружит, что его родитель имеет высоту 500px, а значит, и высоту 500px. В результате получается, что контент имеет высоту 800px, а контент выходит за пределы mydiv, при этом mydiv по-прежнему имеет высоту 500px:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
    <div id="mydiv" style="width:500px;height:500px;border:4px solid red">
        <img src="myimage.jpg" width="400" height="300" />
        <div style="width:100%;height:100%;background:yellow">
            hi
        </div>
    </div>
</body>
</html>

IE, работающий в режиме причуд, заставит mydiv расти, чтобы приспособить своих детей во многих ситуациях. Похоже, режим стандартов явно не будет расти. Это всегда так?

Я тестирую это в первую очередь в IE8 и FF3.5 в Windows, где IE8 работает во всех возможных режимах.

Источник

1 ответ

Решение

Нет: в стандартном режиме по умолчанию overflow свойство контейнера должно быть установлено в visible Это означает, что переполненный контент будет отображаться вне области отсечения контейнера. Там нет такого overflow возможность увеличения размера контейнера в соответствии с его дочерними элементами. Вы можете увидеть больше о переполнении здесь

Однако есть методы выращивания контейнера, чтобы соответствовать его размеру детей. В стандартном режиме правильный способ сделать это - установить свойство CSS min-height вместо собственности height,

Поскольку в IE6 поведение, обеспечивающее высоту, не происходит, люди обычно заканчивают тем, что устанавливают оба min-height для совместимых со стандартами браузеров, а затем либо установить height для IE только с условными комментариями или с префиксом имени свойства с подчеркиванием _ поэтому IE6 будет использовать его, но другие браузеры будут игнорировать его.

Таким образом, ваш div будет что-то вроде

<div id="mydiv" style="width:500px;min-height:500px;_height:500px;border:4px solid red">

Вы можете найти больше информации о min-height здесь и быстрый поиск Google/Bing для min-height IE6 даст вам все ответы, которые вам нужны.

Источник
Другие вопросы по тегам