height的百分比
height百分比的大小是相对其最近的父元素的高的大小,其最近的父元素应该有一个明确的高度值才能使其百分比高度生效
min-height 百分比
设置min-height 的元素即使内容很少时也能撑到min-height设置的高度,当内容大于min-height时就设置为内容的高度。
注意:父元素设置了min-height,但没有设置height属性时,子元素的height和min-height不会生效。
因为设置height和min-height必须基于一个固定的高度或者是一个有效百分比高度的父元素
代码展示
<div class="contain1">
<div class="wap1">
map1的height 生效
</div>
</div>
<div class="contain2">
<div class="wap2">
wap2的height不生效
</div>
</div>
css
.contain1
{
height:100px;
background-color:red;
}
.map1
{
height:50%;
background-color:green;
}
.contain2
{
min-height: 100px;
}
.map2
{
/*该min-height无效,因为其父元素没有设置有效的height属性(即使设置了min-height属性)*/
min-height:50%;
background-color:green;
}
div布满屏幕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<div class="header">头部</div>
<div class="page">
<div class="left">left sidebar</div>
<div class="content">main content</div>
<div class="right">right sudebar</div>
</div>
<div class="footer">footer section</div>
</div>
</body>
</html>
css:
html,body{
/*将height设置为100%,使得内容铺满屏幕*/
/*且#container有高度基于的父元素*/
height: 100%;
background-color: #dddddd;
}
#container {
/*即使内容很少,也能铺满整个屏幕*/
/*当内容高度大于屏幕高度时,内容会延伸*/
min-height: 100%;
background-color: #ffffff;
width: 500px;
margin-left: auto;
margin-right: auto;
}