这是情况,我有这个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在这里:
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*/
}
基本上我想要做的是#cont div必须具有100%的最小高度(如果我的内容很小)但如果内容较长则会延长。
任何帮助,将不胜感激。
注意:宽度大小暂时只是暂时的。
谢谢!
这可能有效:
#main{
height : 100%;
}
#cont {
min-height : 100%;
/* Without the hacks */
}
试试这个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;
}
如果你想让页脚留在底部:
#footer {
position: absolute;
bottom: 0;
}
你正在使用最小高度:100%这意味着'使这个盒子的最小高度成为它的高度'
你会更好地使用像素值(例如,make #menu和#cont min-height:400px;)
如果你想让它们成为最高的那个,那么你需要一些jquery:
if (jQuery('#menu').height() < jQuery('#cont').height()) {
// the cont is bigger than the menu
jQuery('#menu').css("height", jQuery('#cont').height());
}