下面的代码创建一个div盒子并设置背景色,但是不是全局背景色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#app {
background: #00FFFF;
}
</style>
</head>
<body>
<div id="app">设置背景色</div>
</body>
</html>
通过检查元素,发现它的父元素都不是全局
通过下面的代码,设置父级元素100%高
html,body {
height: 100%;
margin: 0;
padding: 0;
}
现在发现父级元素已经是全局了
再设置当前DIV盒子的height为100%即可全局显示。
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#app {
background: #00FFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="app">设置背景色</div>
</body>
</html>