Menu
I want to create 3 div such that the entire page is of the size of the window( i.e the page should not scroll) and each div should have height as of some percent of the entire height. e.g
|--------------------------------------|
| Body height=window's height |
| |----------------------------------| |
| | Header height:10% | |
| |----------------------------------| |
| | | |
| | Content height:85% | |
| | | |
| | | |
| |----------------------------------| |
| | Footer height:5 % | |
| |----------------------------------| |
|--------------------------------------|
Here is the code which I used without any success
<body style="width: 100%; height:100%">
<div style="width: 100%; height:100%;">
<div id="headerDiv" style="width: 100%; height:10%; background-color: #ff0000">
<!-- some content -->
</div>
<div style="width: 100%; height:85%;" >
<!-- some content -->
</div>
<div style="width: 100%; height:5%" >
<!-- some content -->
</div>
</div>
</body>
920
Do you need something like this?
Demo
html, body {
height: 100%;
}
div:nth-of-type(1) {
background: #f00;
height: 20%;
}
div:nth-of-type(2) {
background: #00f;
height: 70%;
}
div:nth-of-type(3) {
background: #0f0;
height: 10%;
}
I guess your solution will also work, but you must have missed out resetting default browser styles, use this in your CSS and you've missed out setting height: 100%; for html element too
* {
margin: 0;
padding: 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
