常常会有设计稿里背景图铺满整个屏幕,因此我们需要让一个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后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
欢迎留言交流。