Height:100%为什么不生效

2023年12月29日 183次阅读 来源: 菜菜___

常常会有设计稿里背景图铺满整个屏幕，因此我们需要让一个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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞