Height: why 100% doesn't work

There are always background pictures in the design draft to cover the whole screen, so we need to let a div cover the whole screen. The first thing we think about is to set width:100%;height:100%, but the result is often not what people want. Width: 100% covers the screen in the horizontal direction, but height: 100% does not cover the whole screen in the vertical direction, but comes from the actual height of the div content .

The height percentage is calculated according to the height of the parent element. If the height of the parent element is 100px, the height of 50px will be obtained if the height of the child element is set to 50%. However, when css is loaded, the content of the web page may not be fully loaded. At this time, the height of the parent element is not known, so we need to set the height of 100% for all the parent elements, so that the height of the child element is set to 100% %Will take effect.

The code is as follows: the background color of the following sub element div is yellow, which will cover the whole screen:

<!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>

When we want elements to cover the whole screen, we can try the second method, absolute positioning or fixed positioning

1. Positioning + width: 100%;height:100%

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        /*Absolute positioning, relative to the parent element*/
        position: absolute;
        /*Fixed positioning, positioning relative to browser window*/
        /*position: fixed;*/
        width:100%;
        height: 100%;
        background: yellow;
    }
</style>
<body>
<div></div>
</body>
</html>

2: positioning + top, bottom, left, right are all 0

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        /*Absolute positioning, relative to the parent element*/
        position: absolute;
        /*Fixed positioning, positioning relative to browser window*/
        /*position: fixed;*/
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: yellow;
    }
</style>
<body>
<div></div>
</body>
</html>

Technical blog of the original author: https://www.jianshu.com/u/ac4daaeecdfe
After 95, there is a front-end girl who loves reading and making friends. Record the problems encountered in work here, hoping to bring a little help to everyone you see.
Welcome to leave a message.

Posted by jazz_snob on Wed, 04 Dec 2019 22:37:54 -0800

Programmer Group

Height: why 100% doesn't work

Hot Keywords