Here is the situation, I have this 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:
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.
Any help would be appreciated.
Note: The width size is just temporary for now.
Thanks!
This may work:
#main{
height : 100%;
}
#cont {
min-height : 100%;
/* Without the hacks */
}
Try this 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;
}
you are using min-height:100% which means 'make the minimum height of this box be the height of it'
you would be better using a pixel value (eg, make #menu and #cont min-height:400px;)
if you want to make them both the height of the tallest one, then you'll need some jquery:
if (jQuery('#menu').height() < jQuery('#cont').height()) {
// the cont is bigger than the menu
jQuery('#menu').css("height", jQuery('#cont').height());
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.