这是我的 HTML：
<div id="container">
<div id="left-container">
</div>
<div id="right-container">
</div>
</div>
容器的高度为 100%（我用 Firebug 检查过）。但
#left_container下面是我的 CSS 和屏幕截图。黄色应该是 100%。黄色是
#left-containerhtml, body {
height: 100%;
}
#container {
position:relative;
margin: 0 auto;
width: 100%;
height:100%;
height: auto !important;
min-height:100%;
background: #fff;
}
#left-container {
width: 300px;
background: #ff0;
height:100%;
height: auto !important;
min-height:100%;
}
本文详细讨论了问题和解决方案：
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
这也可能有帮助：
#outer {
position: absolute;
height: auto;
width: 200px;
border: 1px solid red;
}
#inner {
position: absolute;
height: 100%;
width: 20px;
border: 1px solid black;
}<div id='outer'>
<div id='inner'>
</div>
text
</div>有关上述内容的更多详细信息，请参阅此处：
如何使浮动div的高度达到其父级的100%？
<style>
#outer-container {
height:200vh;
width:100%;
position:relative;
background-color:orange;
}
#left-container{
position:absolute;
width:100%;
height:100%;
background-color:blue;
}
</style><body>
<div id="outer-container">
<div id="left-container">
</div>
</div>
</body>
margin:0;
padding:0;
height:100%;
让集装箱得到你想要的东西。