Div 100％高度适用于Firefox，但不适用于IE [英] Div 100% height works on Firefox but not in IE

问题描述

我有一个容器div，拥有两个内部div;两个应该在容器内占据100％的宽度和100％的高度。

I have a container div that holds two internal divs; both should take 100% width and 100% height within the container.

我将两个内部div设置为100％的高度。这在Firefox中工作正常，但在IE中，div不会扩展到100％的高度，而只是它们内部的文本的高度。

I set both internal divs to 100% height. That works fine in Firefox, however in IE the divs do not stretch to 100% height but only the height of the text inside them.

以下是简化版本我的样式表。

The following is a simplified version of my style sheet.

#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中可以正常工作在怪癖模式呈现。
在标准模式呈现中，在Firefox中可能无法正常工作。

I think "works fine in Firefox" is in the Quirks mode rendering only. In the Standard mode rendering, that might not work fine in Firefox too.

百分比取决于包含块的视口。

percentage depends on "containing block", instead of viewport.

CSS规范说

百分比是用
计算的， b $ b框的包含块。如果包含块的高度
不是明确指定的
（即，它取决于内容高度上的
），并且该元素
不是绝对定位的，则
值计算为自动。

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to '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依赖。

To stretch to 100% height of viewport, you need to specify the height of the containing block (in this case, it's #container). Moreover, you also need to specify the height to body and html, because initial Containing Block is "UA-dependent".

所有你需要的是.. 。

All you need is...

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

这篇关于Div 100％高度适用于Firefox，但不适用于IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！