Height

Stacks provides atomic sizing classes for heights using pixel, rem, and percentage values. Most height classes are based on a 16px base font size and will scale based on the browser's font size.

Pixel height

Section titled Pixel height

Pixel height classes allow you to set the height of an element to a specific pixel value.

Pixel height classes

Section titled Pixel height classes

Class	Computed value	rem value
`.h0`	height: 0px;	0rem
`.h1`	height: 1px;	0.063rem
`.h2`	height: 2px;	0.125rem
`.h4`	height: 4px;	0.25rem
`.h6`	height: 6px;	0.375rem
`.h8`	height: 8px;	0.5rem
`.h12`	height: 12px;	0.75rem
`.h16`	height: 16px;	1rem
`.h24`	height: 24px;	1.5rem
`.h32`	height: 32px;	2rem
`.h48`	height: 48px;	3rem
`.h64`	height: 64px;	4rem
`.h96`	height: 96px;	6rem
`.h128`	height: 128px;	8rem

Base height examples

Section titled Base height examples

<div class="h2">…</div>
<div class="h4">…</div>
<div class="h6">…</div>
<div class="h8">…</div>
<div class="h12">…</div>
<div class="h16">…</div>
<div class="h24">…</div>
<div class="h32">…</div>
<div class="h48">…</div>
<div class="h64">…</div>
<div class="h96">…</div>
<div class="h128">…</div>

.h0

.h1

.h2

.h4

.h6

.h8

.h12

.h16

.h24

.h32

.h48

.h64

.h96

.h128

Sizing units height

Section titled Sizing units height

Sizing units height classes allow you to set the height of an element according to a predefined set of 12 common values in used in Stacks.

Sizing units height classes

Section titled Sizing units height classes

Class	Computed value	rem value
`.hs1`	height: 128px;	8rem
`.hs2`	height: 256px;	16rem
`.hs3`	height: 344px;	21.5rem
`.hs4`	height: 448px;	28rem
`.hs5`	height: 512px;	32rem
`.hs6`	height: 640px;	40rem
`.hs7`	height: 768px;	48rem
`.hs8`	height: 848px;	53rem
`.hs9`	height: 960px;	60rem
`.hs10`	height: 1024px;	64rem
`.hs11`	height: 1120px;	70rem
`.hs12`	height: 1280px;	80rem

Sizing units height examples

Section titled Sizing units height examples

<div class="hs1">…</div>
<div class="hs2">…</div>
<div class="hs3">…</div>
<div class="hs4">…</div>
<div class="hs5">…</div>
<div class="hs6">…</div>
<div class="hs7">…</div>
<div class="hs8">…</div>
<div class="hs9">…</div>
<div class="hs10">…</div>
<div class="hs11">…</div>
<div class="hs12">…</div>

.hs1

.hs2

.hs3

.hs4

.hs5

.hs6

.hs7

.hs8

.hs9

.hs10

.hs11

.hs12

Fluid height

Section titled Fluid height

Fluid height classes allow you to set the height of an element to a percentage of the parent element's height or to the full height of the viewport.

Fluid height classes

Section titled Fluid height classes

Class	Value	Responsive?
`.h100`	height: 100%;
`.h-screen`	height: 100vh;
`.h-auto`	height: auto;

Fluid height examples

Section titled Fluid height examples

<div class="h100">…</div>

.h100

Min height

Section titled Min height

Min height classes allow you to set the minimum height of an element.

Min height classes

Section titled Min height classes

Class	Computed value	rem value
`.hmn0`	min-height: 0;	-
`.hmn1`	min-height: 128px;	8rem
`.hmn2`	min-height: 256px;	16rem
`.hmn3`	min-height: 344px;	21.5rem
`.hmn4`	min-height: 448px;	28rem
`.hmn5`	min-height: 512px;	32rem
`.hmn6`	min-height: 640px;	40rem
`.hmn7`	min-height: 768px;	48rem
`.hmn8`	min-height: 848px;	53rem
`.hmn9`	min-height: 960px;	60rem
`.hmn10`	min-height: 1024px;	64rem
`.hmn11`	min-height: 1120px;	70rem
`.hmn12`	min-height: 1280px;	80rem
`.hmn100`	min-height: 100%;	-
`.hmn-screen`	min-height: 100vh;	-
`.hmn-initial`	min-height: initial;	-

Max height

Section titled Max height

Max height classes allow you to set the maximum height of an element.

Max height classes

Section titled Max height classes

Class	Computed value	rem value
`.hmx1`	max-height: 128px;	8rem
`.hmx2`	max-height: 256px;	16rem
`.hmx3`	max-height: 344px;	21.5rem
`.hmx4`	max-height: 448px;	28rem
`.hmx5`	max-height: 512px;	32rem
`.hmx6`	max-height: 640px;	40rem
`.hmx7`	max-height: 768px;	48rem
`.hmx8`	max-height: 848px;	53rem
`.hmx9`	max-height: 960px;	60rem
`.hmx10`	max-height: 1024px;	64rem
`.hmx11`	max-height: 1120px;	70rem
`.hmx12`	max-height: 1280px;	80rem
`.hmx100`	max-height: 100%;	-
`.hmx-screen`	max-height: 100vh;	-
`.hmx-initial`	max-height: initial;	-