Div 100% 高度适用于 Firefox，但不适用于 IE

Posted 2023-03-05

【中文标题】Div 100% 高度适用于 Firefox，但不适用于 IE

【英文标题】：Div 100% height works on Firefox but not in IE

【发布时间】：2010-09-15 10:24:50

【问题描述】：

我有一个包含两个内部 div 的容器 div；两者都应在容器内占用 100% 的宽度和 100% 的高度。

我将两个内部 div 设置为 100% 高度。这在 Firefox 中运行良好，但在 IE 中，div 不会拉伸到 100% 的高度，而只会拉伸到其中文本的高度。

以下是我的样式表的简化版本。

#container

   height: auto;
   width: 100%;


#container #mainContentsWrapper

   float: left;

   height: 100%;
   width: 70%;
   margin: 0;
   padding: 0;



#container #sidebarWrapper
      
   float: right;

   height: 100%;
   width: 29.7%;
   margin: 0;
   padding: 0;

我做错了什么吗？或者我错过了什么 Firefox/IE 怪癖？

【参考方案1】：

我认为“在 Firefox 中运行良好”仅在 Quirks 模式 呈现。 在 标准模式 渲染中，这在 Firefox 中也可能无法正常工作。

百分比取决于“包含块”，而不是视口。

CSS Specification says

百分比计算如下 相对于生成的高度 盒子的包含块。如果身高 包含块的不是 明确指定（即，它取决于 在内容高度上）和这个元素 不是绝对定位的， 值计算为“自动”。

所以

#container  height: auto; 
#container #mainContentsWrapper  height: n%; 
#container #sidebarWrapper  height: n%; 

意思

#container  height: auto; 
#container #mainContentsWrapper  height: auto; 
#container #sidebarWrapper  height: auto; 

要拉伸到视口的 100% 高度，您需要指定包含块的高度（在本例中为 #container）。 此外，您还需要指定 body 和 html 的高度，因为初始 Containing Block 是“UA-dependent”。

你只需要...

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

【讨论】：

很好的解释，伙计

【参考方案2】：

我不确定您要解决什么问题，但是当我有两个需要相同高度的并排容器时，我会在页面加载时运行一些 javascript 来找到两者的最大高度并明确设置另一个到相同的高度。在我看来， height: 100% 可能只是意味着“使其成为完全包含内容所需的大小”，而您真正想要的是“同时制作最大内容的大小”。

注意：如果页面上发生任何事情来改变它们的高度，您需要再次调整它们的大小 - 例如使验证摘要可见或打开可折叠菜单。

【讨论】：

++ 与尝试使用 css 相比，使用 javascript 将花费更少的时间。我知道这样做在 IT 世界中是“不好的做法”……但在商业世界中，“不好的做法”是花费 10 个小时在 css 中做一些可以在 5 分钟内使用 javascript 完成的事情。

@Mr.JavaScript 是的，但有一点保留：那么您需要考虑调整窗口大小，或可折叠项目切换或......“快速修复”通常并不快。跨度>

【参考方案3】：

如果没有看到您实际使用的 html，很难给您一个好的答案。

您是否正在输出 doctype / 使用标准模式渲染？在实际上无法查看 html repro 的情况下，这将是我对 firefox 和 Internet Explorer 之间 html 解释差异的第一个猜测。

【参考方案4】：

当我将容器的边距设置为 0 时，我已经成功地让它工作了：

#container

   margin: 0 px;

除了你所有的其他风格

【参考方案5】：

您可能需要填写以下一项或两项：

html  height:100%; 

或

body  height:100%; 

编辑：哎呀，没有注意到它们被浮动了。你只需要漂浮容器。

【参考方案6】：

我做了一些与 'tvanfosson' 所说的非常相似的事情，即实际上使用 JavaScript 通过诸如 onresize 之类的事件来不断监视窗口中的可用高度，并使用该信息来相应地更改容器大小（以像素为单位）而不是百分比）。

请记住，这确实意味着一个 JavaScript 依赖项，它不像 CSS 解决方案那样流畅。您还需要确保 JavaScript 函数能够正确返回所有主流浏览器的窗口尺寸。

如果前面提到的 CSS 解决方案之一有效，请告诉我们，因为这听起来是解决问题的更好方法。

【参考方案7】：

我认为 IE 不支持使用 auto 来设置高度/宽度，因此您可以尝试给它一个数值（就像 Jarett 建议的那样）。

此外，您似乎没有正确清除浮动。尝试将此添加到您的 CSS 以用于#container：

#container 
    height:100%;
    width:100%;
    overflow:hidden;
    /* for IE */
    zoom:1;

【参考方案8】：

试试这个..

#container

   height: auto;
   min-height:100%;
   width: 100%;


#container #mainContentsWrapper

   float: left;

   height: auto;
   min-height:100%
   width: 70%;
   margin: 0;
   padding: 0;



#container #sidebarWrapper
      
   float: right;

   height: auto;
   min-height:100%
   width: 29.7%;
   margin: 0;
   padding: 0;