What\'s the Difference Between CSS `height: auto` and `height: 100%`?

Understanding the Subtle Differences Between 'height: auto' and 'height: 100%' in CSS

When styling elements with CSS, the properties 'height: auto' and 'height: 100%' can be employed to control an element's vertical dimension. However, understanding their distinct behaviors is crucial to achieve desired results.

'height: 100%'

When 'height: 100%' is applied to an element, it inherits the vertical space of its parent container. In other words, it stretches and contracts according to the parent's height.

For instance, if you have a <div> with a height of 500px and apply 'height: 100%;' to its child element 'innerDiv', 'innerDiv' will also have a height of 500px.

'height: auto'

In contrast, 'height: auto' sets the element's height to its intrinsic size. This means it will adapt to the content it contains, allowing child elements to influence its dimension.

For example, if we add another child element 'evenInner' to 'innerDiv' with a height of 10px, 'innerDiv' will automatically adjust its height to 10px, regardless of its parent container's height.

Examples:

<div>

In this case, 'innerDiv' will have a height of 500px because it inherits from its parent.

<div>

Here, 'innerDiv' will have a height of 10px because its child element 'evenInner' requires that space.

The above is the detailed content of What\'s the Difference Between CSS `height: auto` and `height: 100%`?. For more information, please follow other related articles on the PHP Chinese website!