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

Installation steps of mysql under linux

1. Download the mysql tar file: https://dev.mysql...

How to handle long data when displaying it in html

When displaying long data in HTML, you can cut off...

Complete steps to implement location punch-in using MySQL spatial functions

Preface The project requirement is to determine w...

Vue+ssh framework to realize online chat

This article shares the specific code of Vue+ssh ...

MySQL database operations (create, select, delete)

MySQL Create Database After logging into the MySQ...

About the selection of time date type and string type in MySQL

Table of contents 1. Usage of DATETIME and TIMEST...

Example of how to set up a multi-column equal height layout with CSS

Initially, multiple columns have different conten...

Detailed explanation of ActiveMQ deployment method in Linux environment

This article describes the deployment method of A...

jQuery implements the mouse drag image function

This example uses jQuery to implement a mouse dra...

3 ways to create JavaScript objects

Table of contents 1. Object literals 2. The new k...

MySQL 8.0.12 installation configuration method and password change

This article records the installation and configu...

Issues with using Azure Container Registry to store images

Azure Container Registry is a managed, dedicated ...

Windows Server 2016 Remote Desktop Services Configuration and License Activation (2 Users)

The default number of remote desktop connections ...

Detailed code examples of seven methods for vertical centering with CSS

When we edit a layout, we usually use horizontal ...

3 codes for automatic refresh of web pages

In fact, it is very simple to achieve this effect,...