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/IE 怪癖?

Is there something I am doing wrong? Or any Firefox/IE quirks I am missing out?

推荐答案

我认为在 Firefox 中工作正常"仅适用于 Quirks 模式 渲染.在标准模式渲染中，这在 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 规范说明

百分比的计算方式为关于生成的高度盒子的包含块.如果身高包含块的不是明确指定(即，这取决于在内容高度上)，以及这个元素不是绝对定位的，值计算为自动".

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".

你只需要...

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

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