In this JSFiddle, they showed how to split a page in 3 parts.
But if I change #wrapper width to 100% it will work fine, so why it is failing if I change height:400px to height:100% ?
#wrapper {
width: 400px;
height:400px;
}
How to cover the entire page in percentage "%"?
You shouldn't use percentage heights in CSS.
As per this SO answer:
To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height.
So the parent of the div must have an explicit height property. Whilst that height can also be a percentage if you want, that just moves the problem up to the next level.
If you want to make the div height a percentage of the viewport height, every ancestor of the div, including and , have to have height: 100%, so there is a chain of explicit percentage heights down to the div.
This means that the parent element must have an explicit height (which does not in your case). This is because height of a block element defaults to the height of the content, while the width defaults to 100%. This is why your width: 100% works.
Therefore, to get a similar functionality to width:100%, this will only work if it and ALL of its parent elements are set to height: 100% (in this case the body and html elements).
