这是我的 HTML:
<div id="container">
<div id="left-container">
</div>
<div id="right-container">
</div>
</div>
容器是 100% 高度(我用 Firebug 检查过)。但是 #left_container
也需要 100%,但事实并非如此!
下面是我的 CSS 和一个 screenshot .黄色应为 100%。黄色是 #left-container
html, 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
这也可能有帮助:
<style>
#outer {position:absolute; height:auto; width:200px; border: 1px solid red; }
#inner {position:absolute; height:100%; width:20px; border:1px solid black; }
</style>
<div id='outer'>
<div id='inner'>
</div>
text
</div>
有关上述内容的更多详细信息,请参见此处:
How to make a floated div 100% height of its parent?
关于html - 内部 div 需要 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7852798/