height
Sets the height of an element. Supports px, rem, %, vh units, and auto and inherit keywords.
Class List
| Class Patterns | CSS | Example |
|---|---|---|
h{N}px | height: {N}px | h100px, h200px, h300px |
h{N}rem | height: {N}rem | h10rem (100px), h20rem (200px) |
h{N}p | height: {N}% | h50p (50%), h100p (100%) |
h{N}vh | height: {N}vh | h50vh, h100vh |
ha | height: auto | Browser auto-calculated |
hi | height: inherit | Inherits parent value |
Unit Comparison
Comparison of the same visual height expressed in 4 different units.
px (pixel) — h100px
Fixed 100px. Always the same regardless of screen size
rem (root em) — h10rem
10rem = 100px (1rem = 10px). Proportional to root font size
% (percent) — h100p
100% of parent height. Parent must have defined height
vh (viewport height) — h20vh
20% of viewport height. Varies with window size
rem Conversion Guide
Based on html { font-size: 10px }, 1rem = 10px. rem is recommended for 20px and above.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">px value | rem value | Class |
|---|---|---|
| 20px | 2rem | h2rem |
| 40px | 4rem | h4rem |
| 60px | 6rem | h6rem |
| 80px | 8rem | h8rem |
| 100px | 10rem | h10rem |
| 150px | 15rem | h15rem |
| 200px | 20rem | h20rem |
| 300px | 30rem | h30rem |
| 400px | 40rem | h40rem |
Class Details
h{N}pxheight: {N}px
Sets a fixed height in pixel units. Suitable for small elements like icons, avatars, dividers, etc.
<!-- Fixed height avatar -->
<div class="w48px h48px br100p bg6366F1 df jcc aic cFFFFFF fs14px">
AB
</div>
<!-- Fixed height divider -->
<div class="w100p h1px bg27272A"></div>
<!-- Fixed height thumbnail -->
<div class="w200px h150px bg18181B br8px oh">
<img src="thumb.jpg" class="w100p h100p ofc" />
</div>px size comparison
h{N}remheight: {N}rem
Sets height in rem units. Since 1rem = 10px, h10rem is 100px, h20rem is 200px.
<!-- Card thumbnail area -->
<div class="h20rem bg18181B br8px oh">
<img src="cover.jpg" class="w100p h100p ofc" />
</div>
<!-- Hero section -->
<div class="h40rem df jcc aic bg18181B">
<h2 class="fs3-6rem fw800 cFAFAFA">Hero Title</h2>
</div>
<!-- rem Size Comparison -->
<div class="h4rem bg27272A p8px br4px mb8px df aic">h4rem = 40px</div>
<div class="h6rem bg27272A p8px br4px mb8px df aic">h6rem = 60px</div>
<div class="h10rem bg27272A p8px br4px df aic">h10rem = 100px</div>rem size comparison
h{N}pheight: {N}%
Sets percentage height based on parent element height. p represents %.
<!-- 100% of parent height (parent must have height) -->
<div class="h300px bg18181B">
<div class="h100p bg6366F1 df jcc aic cFFFFFF">
100% of parent (300px)
</div>
</div>
<!-- 50% of parent height -->
<div class="h200px bg18181B">
<div class="h50p bg34D399 df jcc aic c000000">
50% of parent (100px)
</div>
</div>Caution: Parent height required
h100p requires the parent element to have an explicit height. If the parent has no height, percentage height is ignored. Use h100vh or set height on the entire parent chain.
h{N}vhheight: {N}vh
Sets height based on viewport height. h100vh is the full screen height, essential for fullscreen layouts.
<!-- Fullscreen hero -->
<div class="h100vh df jcc aic bg18181B">
<div class="tac">
<h1 class="fs4-8rem fw800 cFAFAFA">Fullscreen Hero</h1>
<p class="fs16px c71717A mt16px">Section that fills the entire screen</p>
</div>
</div>
<!-- Header-Main-Footer layout -->
<div class="dg gtrauto-1fr-auto h100vh">
<header class="py16px px2rem bg18181B">Header</header>
<main class="p2rem">Main Content (all remaining space)</main>
<footer class="py16px px2rem bg18181B">Footer</footer>
</div>
<!-- Half height section -->
<div class="h50vh df jcc aic bg27272A">
Half screen height
</div>Common Combinations
h100vh | Full screen height. Essential for fullscreen layouts |
h100vh df fdc | Full height + flex vertical (header-main-footer) |
minh100vh | Minimum full height. Expands with more content |
h50vh | Half screen height. Used for hero sections |
h100vh df jcc aic | Full screen center. Loading, error pages |
haheight: auto
Browser automatically calculates height to fit content. Most elements default to auto; used to release fixed height.
<!-- Release fixed height -->
<div class="h200px md-ha">
Default 200px, auto-fit to content below 1024px
</div>
<!-- Auto height fitting content (default behavior) -->
<div class="ha bg18181B p2rem br8px">
<p>This area only takes up as much height as the content.</p>
<p>As content grows, the height grows with it.</p>
</div>height: auto vs explicit height
ha only takes up height equal to its content. If no content, it becomes 0px. If minimum height is needed, combine with minh.
hiheight: inherit
Inherits the parent element's height value directly. Used to pass the parent's fixed height to children.
<!-- Inherit parent height -->
<div class="h200px">
<div class="hi bg18181B p16px df aic">
Inherits parent's 200px as-is
</div>
</div>Responsive
Combined with media query prefixes, you can adjust height based on screen size.
<!-- Fullscreen to auto height on mobile -->
<div class="h100vh sm-ha">
Default fullscreen, auto-fit to content below 768px
</div>
<!-- Fixed height to smaller on mobile -->
<div class="h40rem sm-h20rem">
Default 400px, 200px below 768px
</div>
<!-- Hero responsive -->
<div class="h100vh md-h50vh sm-h30rem df jcc aic">
Desktop: Full, Tablet: Half, Mobile: 300px
</div>| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Class Combination | Behavior |
|---|---|
h100vh sm-ha | Default fullscreen, auto at 768px and below |
h40rem sm-h20rem | Default 400px, 200px at 768px and below |
h100vh md-h50vh | Default 100vh, 50vh at 1024px and below |
h200px md-ha | Default 200px, auto at 1024px and below |
h100vh md-h50vh sm-h30rem | Default 100vh, 50vh at 1024px, 300px at 768px |
Tips & Notes
Use h100vh for fullscreen
To fill the full screen height, use h100vh. h100p only works when parent height is defined.
height: auto is the default
Most elements default to height: auto, taking up only content height. Only use height classes when explicit height is needed.
The percentage height pitfall
h100p requires the parent element to have explicit height. If the entire parent chain has no height, it is ignored. For guaranteed full height, use h100vh.
Mobile vh caution
On mobile browsers, h100vh includes the address bar height, potentially exceeding the actual screen. Calculate actual viewport height with JavaScript if needed.