Recommended Free Tools
If a div stops at its specified height while its text continues, use min-height: 100% when you want it to be at least as tall as its containing block and grow with the content. height: 100% sets a height relative to that block; it does not mean “fill the viewport, then keep expanding.”
Why height: 100% can appear to stop short
In the SitePoint example, the page sets html and body to height: 100%, then gives a child div height: 100%. With a small amount of text, the result looks right. When the text gets longer, it extends beyond the div’s specified box instead of making that box taller. The original discussion describes this behavior.
A percentage height is resolved against the height of the containing block, not against an unlimited amount of content. The W3C’s CSS Box Sizing Module Level 3 states that percentages are resolved against the relevant dimension of the containing block. So height: 100% means “use the containing block’s height” when that height can be resolved; it does not mean “at least this tall, and expand if needed.”
Percentage sizing also depends on the containing block. Under the CSS 2.1 visual formatting rules, when a non-absolutely positioned element’s containing-block height is not explicitly specified and instead depends on its content, a percentage height computes to auto. A percentage height on a child therefore cannot be understood in isolation from the sizing of its ancestors.
Use min-height when the block should grow with content
For the forum example’s apparent goal—a green block at least as tall as the viewport-sized ancestor, but taller when the text requires it—replace height with min-height:
html, body {
height: 100%;
}
div {
min-height: 100%;
max-width: 18.75em;
background-color: #008000;
}min-height sets a lower bound rather than a fixed box height. The div can reach the containing block’s height when content is short, then grow beyond that minimum when more content needs room. That is why the SitePoint replies recommend min-height: 100% for this content-growing case.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose sizing based on the intended behavior
| Goal | Approach | What to expect |
|---|---|---|
| Let a page section grow naturally as text is added | Use min-height for the desired minimum |
The section can grow beyond its minimum to accommodate content. |
| Keep a panel at a deliberate fixed height | Use height and choose an overflow behavior |
Content may exceed the box; decide whether it should scroll, clip, or otherwise be handled. |
| Make a percentage height match an ancestor | Check that the containing block’s height is resolvable | A content-dependent ancestor can change how the percentage is computed. |
Fixed heights are not inherently wrong: they suit designs that require a bounded panel, often with an explicit scrolling or clipping strategy. But for fluid text in a block that should lengthen with the page, a fixed height is usually the wrong sizing rule.
What to inspect if min-height does not solve it
- Check the containing block. Identify the element against which the percentage is resolved, and whether its height is explicitly specified or content-dependent.
- Check the layout context. The forum example is a simple block in ordinary page flow. Nested layout contexts, positioning, or application-specific constraints may require examining more than the child declaration.
- Check box dimensions and overflow. Padding, borders, and overflow settings can affect the visible result and how excess content behaves.
- Confirm the design goal. Decide whether the element should grow with content, remain bounded, or provide its own scrolling region before choosing between
min-heightandheight.
The 2018 SitePoint thread does not identify browser versions or provide cross-browser testing, and its example should not be treated as a universal fix for every layout. The containing-block rules in the W3C specifications explain why the recommendation fits the simple content-growing case; more complex layouts should be evaluated in their actual context.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
