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

Div 100% height works on Firefox but not in IE

提问by Marcel

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

我有一个包含两个内部 div 的容器 div；两者都应该在容器内占据 100% 的宽度和 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.

我将两个内部 div 都设置为 100% 高度。这在 Firefox 中工作正常，但是在 IE 中，div 不会拉伸到 100% 的高度，而只会拉伸到其中文本的高度。

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

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

有什么我做错了吗？或者我错过的任何 Firefox/IE 怪癖？

回答by

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

我认为“在 Firefox 中工作正常”仅适用于Quirks 模式渲染。在标准模式渲染中，这在 Firefox 中也可能无法正常工作。

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

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

CSS Specification says

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

该百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为 'auto'。

so

所以

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

means

方法

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

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

要拉伸到视口的 100% 高度，您需要指定包含块的高度（在本例中，它是 #container）。此外，您还需要指定 body 和 html 的高度，因为初始 Containing Block 是“UA-dependent”。

All you need is...

所有你需要的是...

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

回答by bryansh

Its hard to give you a good answer, without seeing the html that you are actually using.

在没有看到您实际使用的 html 的情况下，很难给您一个好的答案。

Are you outputting a doctype / using standards mode rendering? Without actually being able to look into a html repro, that would be my first guess for a html interpretation difference between firefox and internet explorer.

您是否正在输出文档类型/使用标准模式渲染？实际上无法查看 html repro，这将是我对 Firefox 和 Internet Explorer 之间的 html 解释差异的第一个猜测。

回答by tvanfosson

I'm not sure what problem you are solving, but when I have two side by side containers that need to be the same height, I run a little javascript on page load that finds the maximum height of the two and explicitly sets the other to the same height. It seems to me that height: 100% might just mean "make it the size needed to fully contain the content" when what you really want is "make both the size of the largest content."

我不确定您要解决什么问题，但是当我有两个需要相同高度的并排容器时，我在页面加载时运行了一个小 javascript，它找到了两者的最大高度并将另一个显式设置为一样的高度。在我看来， height: 100% 可能只是意味着“使其成为完全包含内容所需的大小”，而您真正想要的是“使最大内容的大小都相同”。

Note: you'll need to resize them again if anything happens on the page to change their height -- like a validation summary being made visible or a collapsible menu opening.

注意：如果页面上发生任何事情来改变它们的高度，你需要再次调整它们的大小——比如使验证摘要可见或打开可折叠菜单。

回答by casademora

I've been successful in getting this to work when I set the margins of the container to 0:

当我将容器的边距设置为 0 时，我已经成功地让它工作了：

#container
{
   margin: 0 px;
}

in addition to all your other styles

除了你所有的其他风格

回答by Matt Refghi

I've done something very similar to what 'tvanfosson' said, that is, actually using JavaScript to constantly monitor the available height in the window via events like onresize, and use that information to change the container size accordingly (as pixels rather than percentage).

我做了一些与“tvanfosson”所说的非常相似的事情，也就是说，实际上使用 JavaScript 通过 onresize 等事件不断监视窗口中的可用高度，并使用该信息相应地更改容器大小（作为像素而不是百分比） ）。

Keep in mind, this doesmean a JavaScript dependency, and it isn't as smooth as a CSS solution. You'd also need to ensure that the JavaScript function is capable of correctlyreturning the window dimensions across all major browsers.

请记住，这确实意味着 JavaScript 依赖项，它不像 CSS 解决方案那么流畅。您还需要确保 JavaScript 函数能够正确返回所有主要浏览器的窗口尺寸。

Let us know if one of the previously mentioned CSS solutions work, as it sounds like a better way to fix the problem.

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

回答by Jarett Millard

You might have to put one or both of:

您可能必须输入以下一项或两项：

html { height:100%; }

or

或者

body { height:100%; }

EDIT: Whoops, didn't notice they were floated. You just need to float the container.

编辑：哎呀，没有注意到它们被漂浮了。你只需要浮动容器。

回答by Ian Oxley

I don't think IE supports the use of auto for setting height / width, so you could try giving this a numeric value (like Jarett suggests).

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

Also, it doesn't look like you are clearing your floats properly. Try adding this to your CSS for #container:

此外，看起来您没有正确清除浮点数。尝试将其添加到 #container 的 CSS 中：

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

回答by Designerfoo

Try this..

尝试这个..

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