Question

以此页面为例，是否可以将一个孩子插入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">
        <!-- 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在许多情况下增长以适应其子女。似乎标准模式显然不会增长。总是这样吗？

我主要在Windows上的IE8和FF3.5中测试它，IE8以所有可能的模式运行。

Answer 1

否：在标准模式下，容器的默认overflow属性应设置为visible，这意味着溢出的内容将呈现在容器的剪切区域之外。没有这样的overflow选项来增加容器的大小以匹配其子项。您可以在溢出here

上查看更多内容

然而，有一些方法可以增加容器以匹配其子容器的大小。在标准模式下，正确的方法是设置CSS属性min-height而不是属性height。

由于在IE6中没有发生高度强制行为，人们通常最终为符合标准的浏览器设置min-height，然后仅为IE设置height使用conditional comments或在属性名称前加上下划线_，以便IE6使用它，但其他浏览器会忽略它。

所以你的div会像

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

您可以在min-height here上找到更多信息，快速的Google / Bing搜索min-height IE6将为您提供所需的所有答案。

孩子可以在标准模式下影响其父母的大小吗？

1 个答案: