CSS method of controlling element height from bottom to top and from top to bottom

Let’s start the discussion from a common question: How to use CSS to set the height of an element to the [browser content window height].

Solution 1: Make the element full of screen height

In CSS, vh is a special unit of length. The value of 100vh is the [browser content window height].

Therefore, height:100vh; makes the target element have the [browser content window height].

Solution 2: Use cascade height:100%;

Method 1 can only set one element to have the [browser content window height]. But what if we want a series of elements to occupy the entire height together?

This requirement is very common in Web application scenarios. To make your web application look like a native application, we hope that the overall structure of the application always fills the entire screen, no more, no less, and no scroll bars appear. If there is a lot of content inside that needs to be scrolled, a scroll bar may appear in a div inside the application, but the main body of the application does not scroll.

This is an example of collapsed height, where the overall height depends entirely on the height of the content, which is ugly:

This is an example of too large a height. A scroll bar appears on the entire application, and the top bar can be scrolled away:

If the entire page can be scrolled, then after scrolling down, the contents of the top bar will also scroll up and disappear. This is often done on normal web pages, but it should not happen in web applications.

This is a highly normal example. In a well-implemented web application, the entire application cannot be scrolled, but the content window in the middle can be scrolled:

Solution: Control height from top to bottom

The reasons for height collapse and excessive height are actually the same: the height of the parent element is affected by the height of the child element. In other words, the parent element is "expanded" by the child element. A high degree of control is bottom-up.

The reason why the height of the parent element is stretched by the child element is that the default value of height is auto , and the calculation method of auto is based on the child elements.

Therefore, to solve these two problems, the direction of altitude control needs to be reversed: altitude is controlled from top to bottom. Specifically, either define an explicit height for the element, or set a relative height (in percentage) relative to the height of the "grandfather element".

Define an explicit height: Give the element an explicit value for its height so that its height is not affected by its children. For example, height:480px; or height:100vh .
Set a relative height relative to the height of the "grandfather element": the height of the element is determined by the height of the parent element, and is therefore not affected by its children. Use percentage heights to do this: height:100%; or height:90%; .

As long as the above two points are used flexibly, developers can control the height of each element of the entire application.

In the web application example above, the solution is:

First, set the height of the <html> element to 100%, which makes the height of the html element exactly equal to the height of the viewport (content window); then set the height of the body to 100%, which makes the height of the body element exactly equal to the height of the html element (which is equal to the height of the viewport)...
Continue like this, from top to bottom, until you reach the element you want to fill the screen, and set its height to 100% so that its height is equal to the viewport height.

This is a special case of top-down. In fact, when setting the height from top to bottom, you can set a fixed value (100px) or other percentage height (80%) according to your own layout needs.

This method is indeed much more troublesome than directly setting height:100vh; for the target element. But this method has an advantage: in this process, the height of all ancestor elements can be controlled by you. As long as you don't intentionally set a height for a child element that is larger than the parent element, then each parent element will be able to accommodate the child element, which is what we want in most cases. There will be no problem such as "the height of the child element is 100px, but the height of the parent element is not expanded".

If you only set the target element's height:100vh; and the parent element's height is determined from top to bottom (not affected by child elements), then the parent element will maintain its original height and will not be expanded, and overflow will occur. At this time, the problem of "the height of the child element is xxx, but the height of the parent element is not expanded" will arise.

Top-down practical tips: let child elements fill the remaining area of the parent element

The top-down approach has a very practical trick:

<html>
  <body>
    <header></header>
    <div class="content"></div>
  </body>
</html>

If the height of <html> and <body> is already determined (100% viewport), and the height of the header is also determined (64px), how can we make div.content below the header fill the remaining area of the parent element? The answer is also very simple, just set div.content { height: 100%; } . 100% is calculated relative to the remaining available height of the parent element, so this CSS will make div.content fill the remaining area of the parent element.
This is how the effect in this figure is achieved:

Top-down vs. bottom-up

This doesn’t mean that top-down is necessarily better than bottom-up.

The advantage of top-down approach is that as long as the height of the ancestor element is defined, the height of the descendant element will also be determined accordingly.

The advantage of bottom-up is that the height of the parent element can automatically expand as needed and just wrap all child elements.

In a web application, it is often necessary to mix these two methods.

Beware of content overflow

Note that overflow occurs when the content box of a parent element cannot accommodate a child element.

When mixing top-down and bottom-up approaches, you may encounter this problem:

The A element is the parent element of the B element. The height of element A is determined from top to bottom (e.g. height:80% ), and the height of element B is determined from bottom to top ( height:auto ). When the child elements of B expand the height of B and exceed the height of A's content box, overflow occurs.

At this time, consider two options:

Limit the height of B, that is, specify a value for the height of the B element that is not greater than the height of the parent element. For example, height:100px or height:100% .
If you want to display the content of B in the A element, set overflow:auto for A. This way, larger content can be accommodated through scroll bars in limited space.

The chat window is an example of overflow:auto

References

https://stackoverflow.com/questions/7357818/how-can-an-html-element-fill-out-100-of-the-remaining-screen-height-using-css
https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window
https://stackoverflow.com/questions/31893330/html-and-body-elements-height/31895805#31895805
https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#root-height

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Detailed explanation of the implementation principle of transaction isolation level in MySQL

>>: Summarize the common application problems of XHTML code