1

以这个页面为例，是否可以在mydiv中插入一个child，这样会导致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>

在 quirks 模式下运行的 IE 会导致 mydiv 在许多情况下适应它的孩子。似乎标准模式不会明确增长。总是这样吗？

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

4

1 回答 1

3

否：在标准模式下，容器的默认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将为您提供所需的所有答案。

于 2009-11-11T00:56:30.347 回答