常常会有设计稿里背景图铺满整个屏幕，因此我们需要让一个div铺满整个屏幕，首先想到的就是设置width:100%;height:100%,但是结果常常不如人所愿，width：100%在横向方向上是铺满了屏幕，但是height：100%这样写纵向并没有铺满整个屏幕，而是根据div内容的实际高度来的。
高度百分比都是根据父元素的高度来计算的，假如父元素的height为100px,那么子元素设置height:50%则获得50px的高度，但是当css载入时，网页的内容可能没有完全载入，这个时候是不知道父元素高度的，所以我们需要给所有的父元素设置高度100%，这样子元素设置height:100%才会生效。
代码如下,以下子元素div的背景色黄色会铺满整个屏幕：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.father{
width:100%;
height: 100%;
background: red;
}
.child{
width: 100%;
height: 100%;
background: yellow;
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>
当想要元素铺满整个屏幕的时候，我们还可以尝试第二种方法，采用绝对定位或者固定定位
1.定位+width：100%;height:100%
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
div{
/*绝对定位，相对于父级元素进行定位*/
position: absolute;
/*固定定位,相对于浏览器窗口进行定位*/
/*position: fixed;*/
width:100%;
height: 100%;
background: yellow;
}
</style>
<body>
<div></div>
</body>
</html>
2:定位+top、bottom、left、right都为0
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
div{
/*绝对定位，相对于父级元素进行定位*/
position: absolute;
/*固定定位,相对于浏览器窗口进行定位*/
/*position: fixed;*/
top: 0;
bottom: 0;
left: 0;
right: 0;
background: yellow;
}
</style>
<body>
<div></div>
</body>
</html>
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
网友评论