Why does your height:100% not work?

Why does your height:100% not work?

Why doesn't your height:100% work?

This knowledge is not unpopular, but you may still be confused when using it. When it doesn’t work, 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 the percentage width and height

According to the width and height attributes in w3c, it can be clearly seen that the width and height are set 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 a piece of code like this and set a background color at random to facilitate observation of elements. Pay attention to the following code, 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>
//Width is 100%, 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 the width of 100% is easy to achieve, but the height here cannot be set to a % ratio (the element will disappear). Why is that?

3. How does the browser calculate height and width?

Web browsers take into account the open width of the browser window when calculating the effective width. If you don't set any default value for the width, the browser will automatically tile the page content to fill the entire horizontal width. That is, if we don't set the width, it will automatically fill the entire horizontal width, as follows:

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

But the way the height is calculated is completely different. In fact, browsers don't calculate the height of the content at all, unless the content exceeds the viewport (causing scroll bars to appear). Or you set an absolute height for the entire page. Otherwise, the browser will simply let the content pile down without considering the height of the page at all.
Because the page does not have a default height value, when you set the height of an element as a percentage, you cannot obtain the height of the parent element and therefore cannot calculate its own height.
That is, the height of the parent element is just a default value: height: auto; when we set height: 100%, we ask the browser to calculate the percentage height based on such a default value, and we can only get undefined results. That is, a null value, and the browser will not respond to this value.
Different browsers have different interpretations of width and height, so you can search for it yourself.

4. How to solve

Now you know that % is a height calculated relative to the parent element. To make it effective, we need to set the height of the parent element;
One thing to note is that the parent element of the elements in <body> is not just <body>, but also <html>.
So we have to set the height of both at the same time. Setting only one of them will not work:

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

5.A misunderstanding about line-height centering?

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

All the codes are as above. You can see that the line-height is set to 100% but it is not centered. Why is that? Because the % at this time is relative to the font size. Therefore, it is not possible to directly act on elements that do not have an absolute height.

Line-height property description: https://www.w3school.com.cn/cssref/pr_dim_line-height.asp

If you want to center it at this time, you can do a nested div as follows, one for height and one for centering. Although it doesn't seem to be used in this way, centering 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

Transport link:

(...) Front-end knowledge - Why does the height:100% you wrote not work? _Know why - front-end - SegmentFault

This is the end of this article about why the height:100% you wrote does not work. For more related content about height:100% not working, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Detailed explanation of html-webpack-plugin usage

>>:  Front-end implementation of GBK and GB2312 encoding and decoding of strings (summary)

Recommend

Detailed analysis of binlog_format mode and configuration in MySQL

There are three main ways of MySQL replication: S...

JavaScript macrotasks and microtasks

Macrotasks and Microtasks JavaScript is a single-...

Share CSS writing standards and order [recommended for everyone to use]

CSS writing order 1. Position attributes (positio...

Solve the problem that the default value of CSS3 transition-delay attribute is 0 without unit and it is invalid

Today I would like to share with you the CSS3 tra...

ReactHooks batch update state and get route parameters example analysis

Table of contents 1. How to update in batches Con...

Using iframe techniques to obtain visitor QQ implementation ideas and sample code

Today at work, a friend I added temporarily asked ...

Analysis and solution of the reasons for left and right jumps when loading web pages

I have been having this problem recently when desi...

Sample code for implementing the Olympic rings with pure HTML+CSS

Rendering Code - Take the blue and yellow rings a...

Idea configures tomcat to start a web project graphic tutorial

Configure tomcat 1. Click run configuration 2. Se...

Vue.js style layout Flutter business development common skills

Correspondence between flutter and css in shadow ...

How to make CSS child elements highly consistent with parent elements

Absolute positioning method: (1) Set the parent e...

Detailed explanation of basic operation commands such as starting and stopping Nginx under Windows

To use Nginx under Windows, we need to master som...

Two ideas for implementing database horizontal segmentation

introduction With the widespread popularity of In...

Hyperlink icon specifications: improve article readability

1. What is the hyperlink icon specification ?<...

Various correct postures for using environment variables in Webpack

Table of contents Write in front Business code us...