Question

我有一个容器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怪癖？

Answer 1

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

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

CSS Specification says

百分比的计算方法是尊重生成的高度包含块的盒子。如果高度包含块的不是明确指定（即，它取决于在内容高度）和这个元素不是绝对的定位，值计算为'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的高度，因为初始Containing Block是“UA依赖的”。

你需要的只是......

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

Answer 2

很难给出一个很好的答案，而不会看到你实际使用的HTML。

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

Answer 3

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

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

Answer 4

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

#container
{
   margin: 0 px;
}

除了你所有的其他款式

Answer 5

您可能必须放入以下一项或两项：

html { height:100%; }

或

body { height:100%; }

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

Answer 6

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

请注意，此确实表示JavaScript依赖项，并且它不如CSS解决方案那么流畅。您还需要确保JavaScript函数能够正确在所有主流浏览器中返回窗口维度。

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

Answer 7

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

此外，它看起来不像你正在清理你的花车。尝试将此添加到CSS的#container：

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

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

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

8 个答案: