Why Percentage Height Fail?
If you're designing a web page, and you have a column that you'd like to take up the full height of the window, the natural inclination is to add a height: 100%; to that element. After all, if you set the width to width: 100%; the element will take up the full horizontal space of the page, so height should work the same, right?
Wrong.
To understand why, you need to understand how browsers interpret height and width. Web browsers calculate the total available width as a function of how wide the browser window is opened. If you don't set any width values on your documents, the browser will automatically flow the contents to fill the entire width of the window.
But height is calculated differently. In fact, browsers don't evaluate height at all unless the content is so long that it goes outside of the view port (thus requiring scroll bars) or if the web designer sets an absolute height on an element on the page. Otherwise, the browser simply lets the content flow within the width of the view port until it comes to the end. The height is not calculated at all.
The problem occurs when you set a percentage height on an element who's parent elements don't have heights set. In other words, the parent elements have a default height: auto;. You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing.
So, if you want to set a height on your web pages to a percentage, you have to set the height of every parent element of the one you want the height defined. In other words, if you have a page like this:
<html>
<body>
<div style="height: 100%;">
<p>
Make this division 100% height.
</p>
</div>
</body>
</html>
The div that you want to give a 100% height to has two parent elements: <body> and <html>. In order to define the height of the div to a relative height, you must set the height of the body and html elements as well.
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>
Make this division 100% height.
</p>
</div>
</body>
</html>
src : here[^]