Three columns 100% high
I am really stuck in css for this layout. Here is my html code:
<body>
<div id="main">
<div id="left">
menu
</div>
<div id="middle">
</div>
<div id="right">
sidebar
</div>
</div>
</body>
I want the three columns to be on the left, in the middle and on the right with a width of 25%, 60% and 15% as a percentage of the parent and all expand to the 100% height of their parent (main). at that time, I want the main div to have the minimum height of the browser window and the maximum height of its children.
+4
1 answer
You can easily do this using CSS tables:
html, body {
height: 100%;
}
body {
margin: 0;
}
.main {
display: table;
height: 100%;
width: 100%;
}
.left, .middle, .right {
display: table-cell;
background-color: lightgray;
}
.left {
width: 25%;
}
.middle {
background-color: beige;
}
.right {
width: 15%;
}
See demo at: http://jsfiddle.net/audetwebdesign/9L8wJ/
To fill the height of the view port, you first need to set the height: 100%elements in html and body.
display: table height: 100%, , , , , case, , .
, , .
, display: table-cell .
, , , .
+12