首页 >web前端 >css教程 >为什么在 IE 中 Div 不拉伸到容器高度?

为什么在 IE 中 Div 不拉伸到容器高度?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-03 09:49:29705浏览

Why Do Divs Not Stretch to Container Height in IE?

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn