Edit

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

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

Pixel height classes

Class	Output	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

<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>

.h2

.h4

.h6

.h8

.h12

.h16

.h24

.h32

.h48

.h64

.h96

.h128

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

Class	Output	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

<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

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

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

Fluid height examples

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

.h100

Min height

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

Min height classes

Class	Output	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

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

Max height classes

Class	Output	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;	-