lvh
A hundredth of the visible height with browser toolbars fully retracted.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 108+ |
| Chrome Android | 108+ |
| Edge | 108+ |
| Firefox | 101+ |
| Firefox Android | 101+ |
| Safari | 15.4+ |
| Safari iOS | 15.4+ |
Formula 1lvh = 1/100 of the height when browser toolbars are retracted
How it works
1lvh is the large viewport’s height, divided by 100: the window with every retractable toolbar pulled away. On a desktop it equals vh and 10lvh is 80px in a window 800px tall. By definition it is the tallest of the three height readings, or tied with them, and plain vh is defined to follow it, so replacing vh with lvh changes nothing except what the code says.
Choose it for backgrounds and opening art that should fill the screen after the toolbars retract. While the toolbars are showing, the bottom strip of a 100lvh block sits behind them, because the large viewport is the size without them. Keep buttons and text out of that strip.
Try it
Viewport units for a window of your choice
Enter a window size, or take the one you have. Ten of each unit comes out as a tenth of the width, the height, the shorter side or the longer one.
10vw- 128px
10vh- 80px
10vmin- 80px
10vmax- 128px
On a desktop window svh, lvh and dvh give the same numbers as vh. They differ only while a phone browser shows or hides its toolbars, which this page cannot show.
The same as a table
| Unit | Laptop, 1280 by 800 | Phone, 390 by 844 |
|---|---|---|
10vw | 128px | 39px |
10vh | 80px | 84.4px |
10vmin | 80px | 39px |
10vmax | 128px | 84.4px |
What changes it
- Moves with
- the window size
- Stays put under
- the reader's text size
- page zoom
- the font in use
- the query container
- phone toolbars
- the writing mode
Reach for it when
Backgrounds and opening art that should fill the screen once the toolbars retract.
Watch out
lvh is what 100vh already means: plain vh is defined to follow the large viewport, and in Chromium 156 on a desktop 50vh and 50lvh measured the same. Swapping one for the other changes nothing, it only states your intent.
.scenery {
min-block-size: 100lvh;
}