CSS Height: `100%` vs. `auto` – What\'s the real difference?

Understanding the Difference between CSS height: 100% and height: auto

In CSS, the height property defines the vertical dimension of an element. However, the values assigned to it can lead to different outcomes:

height: 100%

This value sets the height of an element to 100% of the height of its parent container. In other words, the element fills the entire available vertical space within its parent.

height: auto

auto indicates that the height of an element should be calculated automatically based on the size of its content. This value is often used when the content is dynamic and its height may vary.

Examples for Clarification

To illustrate the difference further:

Example 1: height: 100%

<div>

In this example, the outer div has a fixed height of 50px. Assigning height: 100% to the inner div causes it to fill the entire 50px of its parent container.

Example 2: height: auto

<div>

In this example, the outer div again has a height of 50px. Since the inner div has height: auto, it adjusts its height to accommodate its content, which in this case is the second div with a height of 10px. Therefore, the inner div will have a height of 10px.

The above is the detailed content of CSS Height: `100%` vs. `auto` – What\'s the real difference?. For more information, please follow other related articles on the PHP Chinese website!