The height property controls an element’s vertical size, but normal document flow usually lets content determine that size. Width is constrained by the parent; height grows from the children. Explicit heights can therefore cause overflow, especially when content changes. section 3.3 section 3.1
Choose the sizing strategy according to the layout problem:
- Avoid explicit heights on content-heavy elements unless a fixed vertical constraint is intentional. section 3.3 section 3.7
- Treat percentage heights cautiously: the containing block needs an explicitly defined height, or the browser may ignore the declaration. section 3.3.2
- Use viewport-relative units such as 100svh or 100lvh when the goal is to fill the screen. section 3.3.2
- Let flexbox or grid solve equal-height columns instead of forcing sibling heights with percentage values. section 3.3.2
Animating a dropdown drawer
A drawer can close with height: 0 and overflow: hidden, but height: auto cannot transition from a numeric length. JavaScript can read scrollHeight when the drawer is measurable, assign that pixel height when opening, and restore height: 0 when closing. Keep the transition in CSS while coordinating the state change with JavaScript. section 15.4
Listing 15.11 Setting the height explicitly so the transition works
<script type="module">
var toggle = document.getElementsByClassName("dropdown__toggle")[0];
var dropdown = toggle.parentElement;
var drawer = document.getElementsByClassName("dropdown__drawer")[0];
var height = drawer.scrollHeight; #1
toggle.addEventListener("click", function () {
dropdown.classList.toggle("is-open");
if (dropdown.classList.contains("is-open")) {
drawer.style.setProperty("height", height + "px"); #2
} else {
drawer.style.setProperty("height", "0"); #3
}
});
</script>
Inspect the JavaScript pattern that measures scrollHeight, assigns an explicit opening height, and returns the drawer to zero on close. section 15.4
For positioned elements, height may supplement selected top, right, bottom, or left offsets; omitting height allows content to determine the size naturally. Fixed elements leave document flow, so surrounding content may need a compensating margin. section 6.1.3
