Div 100％的高度适用于Firefox，但不适用于IE
我有一个容器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的怪癖？
我认为“在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%; }
我不知道你正在解决什么问题，但是当我有两个并排的容器需要相同的高度时，我运行一个页面加载一个小的JavaScript，find两个最大的高度，明确地设置另一个相同的高度。 在我看来，当你真正想要的是“同时制作最大容量的内容”时，100％的高度可能意味着“将内容全部容纳”。
注意：如果页面上发生任何事情来改变它们的高度，你将需要重新调整它们的大小 – 就像validation摘要被显示或可折叠菜单打开一样。
它很难给你一个很好的答案，没有看到你实际使用的HTML。
你正在输出一个文档types/使用标准模式渲染？ 没有真正能够看到一个HTML repro，这将是我的Firefox和Internet Explorer之间的HTML解释区别的第一个猜测。
当我将容器边距设置为0时，我已经成功地实现了这个function：
#container { margin: 0 px; }
除了你所有的其他风格
你可能不得不把一个或两个：
html { height:100%; }
要么
body { height:100%; }
编辑：哎呀，没有注意到他们漂浮。 你只需要漂浮容器。
我做了一些与tvanfosson非常相似的事情，也就是说，实际上使用JavaScript通过像onresize这样的事件不断监视窗口中的可用高度，并使用这些信息相应地更改容器大小（以像素而不是百分比）。
请记住，这确实意味着JavaScript的依赖，并不像CSS解决scheme那样stream畅。 您还需要确保JavaScript函数能够正确返回所有主stream浏览器的窗口大小。
让我们知道如果之前提到的CSS解决scheme之一工作，因为这听起来像一个更好的方法来解决这个问题。
我不认为IE支持使用自动设置高度/宽度，所以你可以尝试给这个数字值（如Jarettbuild议）。
另外，它看起来不像你正在清理你的花车。 尝试添加到您的CSS＃容器：
#container { height:100%; width:100%; overflow:hidden; /* for IE */ zoom:1; }
尝试这个..
#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; }
