About block-level elements fill the entire browser window

We often need to set the size of a block-level element so that it appears on the page, the most common is to set the specific value.

For example, a 200px*200px square with a pink background is displayed on the page.

... #mydiv {    width:200px;    Height:200px;background-color:pink} ... <  ID= "mydiv"></div> ...

What if you want the div to fill the entire browser window?

1. Get the size of the window, and then assign the value to the width and height of the change div. (Can be implemented in JavaScript)

2. Use height:100%;width:100%;

If you use this directly

... #mydiv {    width:100%;    Height:100%;background-color:pink;} ... <  ID= "mydiv">div</div>...

You will find that the results are not as expected, and the part that is propped up depends on the text inside the Div.

The width of the browser window is referenced when the browser calculates the width. If you don't set any default values for width, the browser automatically tiles the contents of the page to fill the entire horizontal width.

however , the browser does not calculate the height of the content, unless the content is outside the window (causing the scroll bar to appear). Or you set an absolute height for the entire page. Otherwise, the browser will simply let the content piled down, the height of the page is not considered at all. 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 its height based on the height of the parent element.

In other words, the height of the parent element is height: auto; just a default value:. When you ask the browser to calculate a percentage height based on such a default value, you can only get undefined results. is a null value, the browser does not react to this value.

so , if you want to make a percentage of an element highly height: 100%; functional, you need to set a valid value for the height of all the parent elements of the element.

For example: In the body there is only one child element Div, and all the parent elements of the DIV are: Body and HTML

... html,body{         height:100%;    } #mydiv {background-color:blue;height:100%;width:100%} .... <  ID= "mydiv"></div>

Display effect:

About block-level elements fill the entire browser window