沉淀 | CSS样式问题之：使元素高度填满浏览器
2016-05-09 本文已影响816人
8c9c47c26245
height 属性
块级元素的height默认是最小化的，也就是由内容撑开。
可以设置height:100%，即高度为父元素的100%。但问题就在于，它的父元素的高度可能本来就是最小化的。
所以，想让元素填满浏览器高度，关键在于让它的所有父元素高度都设置成100%，就解决了。
问题来啦
页面结构如下，想想怎么让#page元素的高度填满浏览器、不多也不少？
<html>
<body>
<div id=page>
Hello, World!
</div>
</body>
</html>
找到答案啦
设置元素高度为100% —— 注意最终html元素的父元素、就相当于是浏览器窗口啦。
html, body {
height:100%;
}
#page {
height:100%;
min-height: 100%; /* 可能是为了兼容性 */
}
完整demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0px;
padding:0px;
}
html, body {
height:100%;
}
body{
background: blue;
}
#page {
height:100%;
min-height: 100%;
width:80%;
margin: auto;
background-color: white;
}
</style>
</head>
<body>
<div id=page>
Hello, World!
</div>
</body>
</html>
在此基础之上做修改，应该能实现对块级元素高度的各种控制。
