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

我认为“在Firefox中工作很好”是最好的选择 怪癖模式 仅渲染。 标准模式 渲染,这在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%高度,需要指定包含块的高度(在本例中,它是#容器)。

你所需要的只是。。。

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

注意:如果页面上发生任何更改其高度的情况,例如验证摘要变为可见或可折叠菜单打开,则需要再次调整其大小。

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

是否使用标准模式渲染输出doctype/文件?在没有真正能够查看html复制的情况下,这将是我对firefox和internet explorer之间html解释差异的第一个猜测。

当我将容器的边距设置为0时,我成功地实现了这一点:

#container
{
   margin: 0 px;
}

除了你所有的其他风格

您可能需要放置以下一项或两项:

html { height:100%; }

或

body { height:100%; }

我做了一些与“tvanfosson”所说的非常类似的事情,也就是说,实际上使用JavaScript通过onresize之类的事件不断监视窗口中的可用高度,并使用这些信息相应地更改容器大小(以像素而不是百分比表示)。

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

让我们知道前面提到的CSS解决方案是否有效,因为这听起来是解决问题的更好方法。

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

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

试试这个。。

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