The article links

<html>
  <body>
    <div style="height: 100%;">
      <p>You want this div to be 100% tall.</p>
    </div>
  </body>
</html>
Copy the code

In the HTML code above, setting div width=100% immediately extends the width to the entire horizontal width of the window, but setting height=100% does not make the div span the entire height of the browser window.

The reason:

Understand how the browser calculates height and width:

  • Width: Web browsers consider 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.
  • Height: 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. In other words, the height of the parent element is just a default value: height: auto; . When you ask the browser to calculate the percentage height based on such a default value, you get undefined. A null value that the browser will not react to.

Solution:

Set the effective height on the parent element:

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>This div will be 100% tall</p>
    </div>
  </body>
</html>
Copy the code