body默认是没有高度的,它是被子元素撑大的。设置border 就能够看出来。
浏览器的开发厂商为了设置背景色建议,背景色设置给body,那么就会全屏应用。
但是,body的高度并没有发生改变。
那么如何设置body为100%呢?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
border: 1px solid #000;
/*box-sizing可以取消因为添加border而出现的滚动条*/
box-sizing: border-box;
background-color: skyblue;
}
</style>
</head>
<body>
</body>
</html>