首页  >  文章  >  web前端  >  为什么我的 DIV 在 Firefox 和 IE 中不是 100% 高度?

为什么我的 DIV 在 Firefox 和 IE 中不是 100% 高度?

Susan Sarandon
Susan Sarandon原创
2024-11-02 21:21:02784浏览

Why Are My DIVs Not 100% Height in Firefox and IE?

Firefox 和 IE 之间的 Div 100% 高度兼容性问题

在这种情况下,您遇到了 Firefox 和 IE 之间 DIV 元素渲染的差异。具体来说,在包含 DIV 中将高度设置为 100% 不会将嵌套 DIV 扩展到 IE 中的完整高度。

Quirks 模式和标准模式行为产生的差异:

  • 在 Quirks 模式(Firefox 可能默认为该模式)下,高度是相对于视口计算的。
  • 在标准模式(推荐设置)下,高度取决于包含块的高度。

在您的代码中,包含块 (#container) 的高度设置为“auto”,在标准模式下,会产生未定义的高度。因此,嵌套 DIV 的高度也变得未定义。

要解决此问题并确保跨浏览器的一致性,您应该显式定义包含块及其祖先直到根(HTML 和 body)的高度elements):

html, body { height: 100%; }
#container { height: 100%; }

通过设置这些元素的高度,您可以建立一个定义良好的包含块,使嵌套的 DIV 能够继承该高度并在所有浏览器中在其容器内拉伸到 100%。

以上是为什么我的 DIV 在 Firefox 和 IE 中不是 100% 高度?的详细内容。更多信息请关注PHP中文网其他相关文章!

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