为什么在容器 div 中使用 100% 高度时，内部 div 在 IE 中无法达到完整高度？

Firefox 和 IE 中 Div 定位中的 CSS 高度怪异

在这种情况下，目标是创建一个封装两个内部 div 的容器 div div，都跨越 100% 的宽度和高度。虽然这在 Firefox 中按预期工作，但 IE 表现出一种特殊的行为，即内部 div 无法达到容器的完整高度，而将它们留在所包含文本的高度。

这种差异源于以下概念CSS 计算中的“包含块”。百分比不是相对于视口计算的，而是相对于“包含块”的高度计算的 - 在本例中为 #container div。

在提供的 CSS 中，#container 缺乏明确的高度规范，依赖于默认为“自动”。这意味着它的高度是根据里面的内容确定的。随后，内部 div 的 100% 高度属性变得相对于此自动高度，该高度根据文本内容而变化。

要纠正此问题，需要进行以下调整：

1. 为 #container 声明显式高度值以建立包含块：

   <code class="css">#container {
     height: 100%;
   }</code>

   登录后复制

2. 设置 html 和 body 的高度，因为初始包含块是浏览器 - dependent:

   <code class="css">html, body {
     height: 100%;
   }</code>

   登录后复制

这些修改将使内部 div 跨越 #container 的整个高度和 100% 的视口，解决在 IE 中观察到的高度问题。

以上是为什么在容器 div 中使用 100% 高度时，内部 div 在 IE 中无法达到完整高度？的详细内容。更多信息请关注PHP中文网其他相关文章！