Html CSS min-height 无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23583092/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS min-height not working properly
提问by Eddie
Here is the situation, I have this html:
这是情况，我有这个html：
<div id='main'>
<div id='menu'>
Menu Items Here
</div>
<div id='cont'>
Content Here
<div id='footer'>Some Footer</div>
</div>
</div>
CSS here:
CSS在这里：
html, body {
height: 100%;
width : 100%;
margin: 0;
padding: 0;
}
#main{
overflow : auto;
background-color: yellow;
width : 100%;
min-height : 100%;
}
#menu {
background-color: red;
float : left;
width : 300px;
}
#cont {
margin-left : 300px;
float : right;
background-color: orange;
width : 100px;
min-height : 100%;
height: auto !important; /*min-height hack*/
height: 100%; /*min-height hack*/
}
What I want to do basically is #cont div must have a min height of 100% (if I have small content) but will extend if have longer content.
我想要做的基本上是#cont div 的最小高度必须为 100%（如果我的内容很小），但如果内容较长，则会扩展。
Any help would be appreciated.
任何帮助，将不胜感激。
Note: The width size is just temporary for now.
注意：宽度大小目前只是暂时的。
Thanks!
谢谢！
采纳答案by agrm
This may work:
这可能有效：
#main{
height : 100%;
}
#cont {
min-height : 100%;
/* Without the hacks */
}
回答by Cameron Martin
Try this http://jsfiddle.net/W6tvW/2/
试试这个http://jsfiddle.net/W6tvW/2/
<div id='main'>
<div id='menu'>
Menu Items Here
</div>
<div id='cont'>
Content Here
<div id='footer'>Some Footer</div>
</div>
</div>
html, body {
height: 100%;
width : 100%;
margin: 0;
padding: 0;
}
#main{
overflow : auto;
background-color: yellow;
min-height : 100%;
position: relative;
}
#menu {
background-color: red;
float : left;
width : 300px;
}
#cont {
margin-left : 300px;
background-color: orange;
min-height : 100%;
position: absolute;
right: 0;
}
If you want the footer to stay at the bottom:
如果您希望页脚留在底部：
#footer {
position: absolute;
bottom: 0;
}
回答by Jonathan
you are using min-height:100% which means 'make the minimum height of this box be the height of it'
您正在使用 min-height:100% 这意味着“使这个盒子的最小高度成为它的高度”
you would be better using a pixel value (e.g., make #menu and #cont min-height:400px;)
您最好使用像素值（例如，制作 #menu 和 #cont min-height:400px;）
if you want to make them both the height of the tallest one, then you'll need some jquery:
如果你想让它们都成为最高的高度，那么你需要一些 jquery：
if (jQuery('#menu').height() < jQuery('#cont').height()) {
// the cont is bigger than the menu
jQuery('#menu').css("height", jQuery('#cont').height());
}
