This is the third day of my participation in the August Text Challenge.”August More Challenge”

## Why write height:100% does not work?

% is set to the width and height of the parent element according to the width and height attributes of the w3c:

###2.width:100%; So let’s write a code that looks like this

<! DOCTYPE html> <! -- Iframe is used to display web pages within web pages. - > < HTML > < head > < title > hello < / title > < / head > < body > < iframe SRC = "https://hxyxyz.top" height = "100%" width = "50%" > < iframe > </body> </html>Copy the code

As shown in figure:

Modify the code as follows

<iframe src="https://hxyxyz.top" height="500px" width="50%"></iframe>
Copy the code

As shown in figure:

You can see that basically 100% width is easy to achieve, but the height cannot be set to % ratio (the element will disappear). Why is this?

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

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

As shown in figure:

But height is calculated in a completely different way. In fact, the browser doesn’t count the height of the content at all, unless the content is out of viewport range (causing the scrollbar to appear). Or you can set an absolute height for the entire page. Otherwise, browsers will simply pile content down, regardless of the height of the page. Because the page does not have a default height value, when you set the height of an element to a percentage height, you cannot calculate your own height based on the height of the parent element. 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 the default value, and only get undefined. A null value that the browser will not react to.

% is a height calculated relative to the parent element. To make this work, we need to set the height of the parent element. It is important to note that the parent element of the element in is not only included, but also included. So we need to set the height of both, not just one:

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