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

What are the core modules of node.js

Table of contents Global Object Global objects an...

How to set horizontal navigation structure in Html

This article shares with you two methods of setti...

Summary of three methods of lazy loading lazyLoad using native JS

Table of contents Preface Method 1: High contrast...

Complete steps to solve 403 forbidden in Nginx

The webpage displays 403 Forbidden Nginx (yum ins...

Solution to the inaccessibility of Tencent Cloud Server Tomcat port

I recently configured a server using Tencent Clou...

js to achieve the effect of light switch

This article example shares the specific code of ...

Learn SQL query execution order from scratch

The SQL query statement execution order is as fol...

Tools to convert static websites into RSS

<br /> This article is translated from allwe...

Docker win ping fails container avoidance guide

Using win docker-desktop, I want to connect to co...

Example of how to change the line spacing of HTML table

When using HTML tables, we sometimes need to chan...

mysql5.7.19 winx64 installation and configuration method graphic tutorial (win10)

The installation tutorial of mysql 5.7.19 winx64 ...

How to compile the Linux kernel

1. Download the required kernel version 2. Upload...

Detailed explanation of how to solve the position:fixed fixed positioning offset problem

question CSS fixed positioning position:fixed is ...

Detailed explanation of the use of Linux seq command

01. Command Overview The seq command is used to g...

Solutions to problems related to software package dependency reporting during installation in Linux

Table of contents background 1) Enable the keepch...