Why did you write height: 100% doesn’t work

Time:2021-7-27

Why did you write height: 100% doesn’t work?

This knowledge is not popular, but it may still be a little confused when used. If it can’t take effect, you can find the answer by searching, but do you really understand it? Why is the height not controlled by% when you want to set a full screen element?

1. Setting of percentage width and height

According to the width and height attributes in W3C, you can clearly% set the width and height according to the width and height of the parent element:
https://www.w3school.com.cn/cssref/pr_dim_width.asp
https://www.w3school.com.cn/cssref/pr_dim_height.asp

2.width:100%;

We write such a piece of code to set a background color at will for easy observation of elements. Pay attention to the following code and remember to add <! DOCTYPE HTML >, otherwise it will be different.

<body>
    <div style="width:100%;height:100%;background-color:blueviolet;">
    width:100%;height:100%;
    </div>
</body>
//The width is 100%, and the height we see now belongs to font size, not 100%;

<body>
    <div style="width:100%;height:200px;background-color:blueviolet;">
    width:100%;height:200px;
    </div>
</body>
//The effect is as follows

You can see that it is easy to achieve 100% of the width, but the height here cannot be set to% ratio (the element will disappear and cannot be seen). Why?

3. How does the browser calculate the height and width

The web browser takes into account the opening width of the browser window when calculating the effective width. If you don’t set any default values for width, the browser will automatically tile the page content to fill the entire horizontal width. That is, if we do not set the width, the entire transverse width will be filled automatically, as follows:


<div style="height:100%;">height:100%;</div>

But the height is calculated in a completely different way. In fact, the browser does not calculate the height of the content at all unless the content is outside the window (causing the scroll bar to appear). Or you can set an absolute height for the entire page. Otherwise, the browser will simply stack the content down, and the height of the page does not need to be considered at all.
Because the page does not have a default height value, when you set the height of an element as a percentage height, you cannot obtain the height of the parent element, and you cannot calculate your own height.
That is, the height of the parent element is only a default value: height: Auto; When we set height: 100%, the browser is required to calculate the percentage height according to such a default value. Only undefined results can be obtained. That is, a null value. The browser will not react to this value.
The resolution of width and height in each browser is also different. You can search it yourself.
 

4. How to solve it

Now you know,% is a calculated height relative to the parent element. To make it effective, we need to set the height of the parent element;
It should be noted that the parent element of the element in < body > is not only < body >, but also < HTML >.
Therefore, we should set the height of both at the same time. It is not possible to set only one of them:


 html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }

5. A misunderstanding about the center of line height?


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        div {
            color: white;
            text-align: center;
            font-size: 30px;
            line-height: 100%;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->
    <div style="height:100%;">height:100%;</div>
    <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->
</body>

</html>

The whole code is as above. You can see that the line height is set to 100% and is not centered. Why? Because the% is relative to the font size at this time? Therefore, it is impossible to act directly on elements without absolute height.

Description of line height attribute:https://www.w3school.com.cn/cssref/pr_dim_line-height.asp

If you want to center at this time, you can do a div nesting, one is responsible for the height, and the other is responsible for the center. Although I don’t think it will be used in this way, the center is still very effective~


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .div1 {
            background-color: blueviolet;
            position: relative;
        }

        .div2 {
            font-size: 30px;    
            color: white;
            text-align: center;                    
            width: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%)  translateY(-50%);
        }
    </style>
</head>

<body>
    <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->
    <div style="height:100%;" class="div1">
        <div class="div2">height:100%;</div>
    </div>
    <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->
</body>

</html>

6. Source code

https://github.com/JiaXinYi/ife-study/blob/master/height/height.html

Handling links:

(…) front end tips — why did you write height: 100% doesn’t work_ Know why – front end – segmentfault no

This is the end of this article about why you wrote height: 100% doesn’t work. For more relevant height: 100% doesn’t work, please search previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!