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

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规范说

百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则该值将计算为"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%; }