Sometimes setting the height percentage has no effect.
The reason is that the parent element does not have a height set.
The parent element can set the height to a specific px. Or 100% and other percentages.
In this way, the height of this element can be set based on the percentage.
<style type="text/css"> html,body { width:100%; height:100%; margin:0px; padding:0px; } .center { width:80%; margin:auto; } #top { height:20%; background-color:yellow; } #module { height:60%; background-color:gray; } #bottom { height:20%; background-color:blue; } </style><body> <div id="top" class="center"></div> <div id="module" class="center"></div> <div id="bottom" class="center"></div></body>