Why Isn\'t My CSS Height in Percent Working?

CSS Height Not Working in Percent: A Resolved Issue

When setting the height of an element to 100%, expecting it to occupy the entire height of its container, but failing to see that behavior, can be a frustrating experience. The issue arises because the element's ancestors also need to have a defined height.

To resolve this, assign a 100% height to all parent elements. In the example provided:

<div>

the parent elements, html and body, must also have their heights set to 100%:

html, body { height: 100%; width: 100%; margin: 0; }

By ensuring that all ancestral elements have definite heights, the child element, div, will correctly occupy the full height of its container. This is because its height is relative to the containing element, and without a defined height for that element, it becomes ambiguous what 100% represents.

The above is the detailed content of Why Isn\'t My CSS Height in Percent Working?. For more information, please follow other related articles on the PHP Chinese website!