小编典典

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

html

我有一个包含两个内部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怪癖?


阅读 317

收藏
2020-05-10

共1个答案

小编典典

我认为“在Firefox中工作正常”仅在 Quirks模式下 呈现。在 标准模式 渲染中,在Firefox中也可能无法正常工作。

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

CSS规范说

相对于生成的盒子的包含块的高度计算百分比。如果未明确指定包含块的高度(即,它取决于内容的高度),并且该元素的位置不是绝对的,则该值将计算为“自动”。

所以

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

手段

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

要拉伸到100%的视口高度,您需要指定包含块的高度(在本例中为#container)。此外,您还需要指定正文和html的高度,因为初始包含块是“与UA相关的”。

所有你需要的是…

html, body { height:100%; }
#container { height:100%; }
2020-05-10