Heim > Artikel > Web-Frontend > Div高度百分比_html/css_WEB-ITnose
有时候设置高度百分比,没有效果。
原因是父元素没有设置高度。
父元素可以设置高度为具体的px。或是100%等百分比。
这样子元素再能根据百分比来设置高度。
<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>