1.height的百分比
当我们给块元素设置百分比高度时,往往没能看到效果.因为百分比的大小是相对其最近的父级元素的高的大小,也就是说,其最近的父级元素应该有一个明确的高度值才能使其百分比高度生效.
<div id="container1">
<div id="wrap">
wrap‘s height work
</div>
</div>
<br>
<div id="container2">
<div id="wrap2">
wrap2‘s height doesn‘t work
</div>
</div>
#container1 {
height: 100px;
background-color: red;
}
#wrap {
height: 50%;
background-color: green;
}
#container2 {
}
#wrap2 {
/*该height属性无效,因为其父元素没有一个明确的高度*/
height: 50%;
background-color: green;
}
子元素的百分比高度也可以基于父元素的百分比高度,前提是父元素的父元素必须有一个明确的高度:
<div id="#container">
<div id="wrap">
<div id="content">
content‘s percent height work only when does the wrap‘height work
</div>
</div>
</div>
#container {
height: 500px;
}
#wrap {
height: 100%;
}
#content {
height: 50%;
}
但是,我们应该尽量避免这种多层百分比高度嵌套的风格.
2.min-height的百分比
再说说min-height吧.设置min-height的元素即使内容的高度很少时也能撑开到min-height设置的高度;当内容的高度大于min-height时就设置为内容的高度.
要使min-height的百分比值生效,其父元素的height值必须为一个固定的高度或者是一个有效的百分比高度.
值得注意的是,父元素设置了有效的min-height但没有设置height属性时,子元素的height和min-height的百分比不会生效.因为设置height和min-height必须基于一个设置了固定高度或者是一个有效百分比高度的父元素.
<div id="container1">
<div id="wrap">
wrap‘s min-height work
</div>
</div>
<br>
<div id="container2">
<div id="wrap2">
wrap2‘s min-height doesn‘t work
</div>
</div>
#container1 {
height: 100px;
background-color: red;
}
#wrap {
/*该min-height生效,因为其父元素设置了有效height属性*/
min-height: 50%;
background-color: green;
}
#container2 {
min-height: 100px;
}
#wrap2 {
/*该min-height无效,因为其父元素没有设置有效的height属性(即使设置了min-height属性)*/
min-height: 50%;
}
3.铺满屏幕的布局方法
我们可以通过设置html和body的高度来填满整个浏览器屏幕的高度:
html {
height: 100%;
}
body {
min-height: 100%;
}
如果我们将html和body都设置为height: 100%时,body的高度仅会被设置为浏览器屏幕的高度.当body里的内容高度大于浏览器屏幕高度时,会因为默认的设置overflow:visible使得高出的部分被隐藏起来.
如果我们将html和body都设置为min-height: 100%时,body元素不会扩展到浏览器屏幕的高度,因为html设置为百分比值的height不会生效(因为html没有父元素了,也就不会符合父元素有明确的高度值的条件),body元素也就因为html没有一个明确的高度使得min-height不会生效.
4.布满屏幕的凝胶状布局
如果你想实现一种铺满屏幕,两边留空的凝胶状布局的话,可以使用如下方式
<html>
<body>
<div id="container">
</div>
</body>
</html>
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;
}
效果:
