Div的高度设置为100%在Firefox中有效，但在IE中无效。

Question

我有一个容器div，其中包含两个内部div; 两者都应在容器内占用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的一些特殊之处吗？

- Marcel Tjandraatmadja

Answer 1

我认为“在Firefox中正常工作”仅适用于怪异模式渲染。在标准模式渲染中，这在Firefox中可能也无法正常工作。

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

CSS规范说：

百分比是相对于生成的框的包含块高度计算的。如果未明确指定包含块的高度（即它取决于内容高度），并且此元素未绝对定位，则该值计算为“auto”。

所以

#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的高度，因为初始包含块是“UA-dependent”。 你所需要的就是...

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

- timeblue

---

很棒的解释，伙计。 - carlo denaro

Answer 2

很难给你一个好的答案，没有看到你实际使用的HTML。你是否输出了文档类型/使用标准模式呈现？如果不能查看HTML的重现，那么这可能是Firefox和Internet Explorer之间HTML解释差异的首要猜测。

- bryansh

Answer 3

我不确定你要解决什么问题，但是当我有两个并排的容器需要具有相同的高度时，我会在页面加载时运行一些JavaScript代码，找到两个容器中的最大高度，并将另一个容器的高度明确设置为相同的高度。对我来说，height: 100%可能只意味着“使其大小足以完全包含内容”，而实际上你想要的是“使两个容器的大小相同，都为最大内容的大小”。注意：如果页面发生任何改变导致它们的高度发生变化，例如显示验证摘要或展开可折叠菜单，则需要重新调整它们的大小。

- tvanfosson

---

使用 JavaScript 来完成任务的正确性比使用 CSS 要快得多。虽然在 IT 领域这样做是“不好的实践”，但在商业领域，“不好的实践”意味着用 CSS 花费 10 小时完成的工作可以在 5 分钟内用 JavaScript 完成。 - Daniel Szabo

@Mr.JavaScript 是的，但要保持谨慎：接下来您需要考虑窗口调整、可折叠项目切换等等...“快速修复”通常并不快速。 - ANeves

Answer 4

当我将容器的边距设置为0时，我成功地使其工作：

#container
{
   margin: 0 px;
}

除了你的其他样式之外

- casademora

Answer 5

我做过与“tvanfosson”类似的事情，也就是使用JavaScript通过事件（如onresize）不断监测窗口中可用的高度，并使用该信息相应地更改容器大小（以像素而非百分比表示）。

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

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

- Matt Refghi

Answer 6

你可能需要放置一个或两个：

html { height:100%; }

或者

body { height:100%; }

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

- Jarett

Answer 7

试试这个...

#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;
}

- Designerfoo

Answer 8

我觉得IE不支持使用auto来设置高度/宽度，所以你可以试试给它一个数字值（就像Jarett建议的那样）。

另外，看起来你没有正确地清除浮动元素。尝试在你的CSS中为 #container 添加以下内容：

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

- Ian Oxley