FullHeight

Fullheight refers to an element whose height matches the height of the viewport, the visible portion of the browser window. In web design, this effect is typically achieved with CSS using the viewport height unit 100vh, or with min-height to ensure content remains readable while filling the vertical space.

The term describes a layout technique rather than a distinct CSS property. Fullheight sections are common for hero areas, immersive introductions, or modular layouts where a block spans the full vertical extent of the screen. Designers often combine fullheight with flexbox or grid to center or arrange content within the viewport.

Implementation patterns include height: 100vh; and min-height: 100vh; for guaranteeing full viewport height. When content must adapt to varying content length, a common pattern is to use display: flex with align-items and justify-content to center content. Some projects use height: 100% in conjunction with container height, but 100vh remains the standard approach for most fullheight sections. Newer techniques also involve dynamic viewport height units such as 100dvh, which accounts for mobile browser UI changes.

Mobile and dynamic viewport considerations can complicate fullheight layouts. On some mobile browsers, the visible viewport height changes as the address bar shows or hides, causing 100vh to become unreliable. Workarounds include JavaScript that sets a CSS variable representing the actual viewport height, and using height: calc(var(--vh) * 100). The 100dvh unit is supported in many modern browsers and helps mitigate these issues.

See also: viewport height units, responsive web design, CSS flexbox, CSS grid, dynamic viewport height.