Height:100%为什么不生效

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

    原文作者:菜菜___
    原文地址: https://www.jianshu.com/p/ef1582794a79
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞