Div高度百分比

时间:2023-03-09 06:57:33
Div高度百分比

有时候设置高度百分比,没有效果。

原因是父元素没有设置高度。

父元素可以设置高度为具体的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>