Mobile browser toolbars can make a full-screen section overflow on initial load. The small viewport unit family sizes elements against the minimum content area, when browser interface elements are fully visible. section 6.4.4
Each sv* unit equals 1% of a corresponding small viewport dimension: 100svh is the small viewport height, so it fills the visible height while the browser UI remains present. If toolbars later hide, the viewport grows but the svh-sized element stays at its stable minimum size. section 6.4.4
The small viewport family maps viewport measurements to CSS dimensions:
- svw measures the small viewport width, while svh measures its height. section 6.4.4
- svb and svi measure the small viewport block and inline dimensions. section 6.4.4
- svmin and svmax use the smaller and larger small viewport dimensions. section 6.4.4
A mobile app layout
Use svh for a toolbar that must not become too tall, then give remaining space to content: .app { display: grid; grid-template-rows: 10svh 1fr 8svh; height: 100dvh; }. Here, 10svh and 8svh remain bounded by the small viewport while 1fr receives the available space. section 6.4.5 section 6.6
