Div 中的高度计算:Firefox 与 IE 兼容性
在容器内嵌套有两个 div 的网页中,期望为两个内部 div 都完全占据容器的宽度和高度。然而,据观察,在 Internet Explorer (IE) 中,内部 div 仅扩展到它们包含的文本的高度,这与 Firefox 不同,在 Firefox 中它们会扩展到整个容器高度。
提供的样式表集两个内部 div、#mainContentsWrapper 和 #sidebarWrapper 都达到 100% 高度。这在 Firefox 中按预期工作,但在 IE 中则不然。造成这种差异的原因在于 CSS 规范对百分比高度的定义。
高度测量的百分比取决于“包含块”的高度,而不是视口的高度。在给定的场景中,#container 充当内部 div 的包含块。由于 #container 的高度设置为“auto”,因此它取决于内容高度。因此,内部 div 的百分比高度实际上被计算为“auto”,这会导致 IE 中出现意外行为。
要解决此问题,必须显式定义 #container 的高度。此外,为了确保 div 拉伸到视口的整个高度, 的高度必须是和<主体>还需要指定元素。
通过进行这些调整,代码在 Firefox 和 IE 中的行为应符合预期:
<code class="CSS">html, body { height:100%; } #container { height:100%; }</code>
以上是为什么在 IE 中 Div 不拉伸到容器高度?的详细内容。更多信息请关注PHP中文网其他相关文章!