Height
Use these utility classes to quickly set the height (percentage and fixed width), minimum height, and maximium height for elements.
Percentage Heights
These utility classes give an element a percentage value. The element will fill the available space up to the percentage given after the element's content is displayed. Meaning, if you've given an element a height of 10%, but the element needs more than 10% for its content, the element will be greater than 10%. To force the element to a specific height, you must give it a fixed value.
The table below lists the class names, percentage, and the CSS output.
| Class | Percantage | Output |
|---|---|---|
| .d-height0 | 0 | height: 0; |
| .d-height10 | 10% | height: 10%; |
| .d-height20 | 20% | height: 20%; |
| .d-height25 | 25% | height: 25%; |
| .d-height30 | 30% | height: 30%; |
| .d-height40 | 40% | height: 40%; |
| .d-height50 | 50% | height: 50%; |
| .d-height60 | 60% | height: 60%; |
| .d-height70 | 70% | height: 70%; |
| .d-height75 | 75% | height: 75%; |
| .d-height80 | 80% | height: 80%; |
| .d-height90 | 90% | height: 90%; |
| .d-height100 | 100% | height: 100%; |
<div class="d-height0">.d-height0</div>
<div class="d-height10">.d-height10</div>
<div class="d-height20">.d-height20</div>
<div class="d-height25">.d-height25</div>
<div class="d-height30">.d-height30</div>
<div class="d-height40">.d-height40</div>
<div class="d-height50">.d-height50</div>
<div class="d-height60">.d-height60</div>
<div class="d-height70">.d-height70</div>
<div class="d-height75">.d-height75</div>
<div class="d-height80">.d-height80</div>
<div class="d-height90">.d-height90</div>
<div class="d-height100">.d-height100</div>Fixed Heights
These utility classes give an element a specific value (versus a percentage of the available space). The table below lists the class names, pixel values, and the CSS output.
| Class | Pixel | Output |
|---|---|---|
| .d-height1 | 108px | height: 10.8rem; |
| .d-height2 | 216px | height: 21.6rem; |
| .d-height3 | 332px | height: 33.2rem; |
| .d-height4 | 464px | height: 46.4rem; |
| .d-height5 | 628px | height: 62.8rem; |
| .d-height6 | 756px | height: 75.6rem; |
| .d-height7 | 912px | height: 91.2rem; |
| .d-height8 | 1024px | height: 102.4rem; |
| .d-height-auto | N/A | height: auto; |
<div class="d-height1">…</div>
<div class="d-height2">…</div>
<div class="d-height3">…</div>
<div class="d-height4">…</div>
<div class="d-height5">…</div>
<div class="d-height6">…</div>
<div class="d-height7">…</div>
<div class="d-height8">…</div>
<div class="d-height-auto">…</div>Min & Max Height
Set an element's minimum and maxium height using the .d-min-height{#} or .d-max-height{#} classes. These classes use the same height values as the .d-height{#} classes. These classes are typically paired with a percentage height class (.d-height{percent}), having an element fill all available space, being at least a specific size (min-height) or no more than a specific size (max-height).
The table below lists the class names and the CSS output.
| Class | Output |
|---|---|
| .d-min-height1 | min-height: 10.8rem; |
| .d-min-height2 | min-height: 21.6rem; |
| .d-min-height3 | min-height: 33.2rem; |
| .d-min-height4 | min-height: 46.4rem; |
| .d-min-height5 | min-height: 62.8rem; |
| .d-min-height6 | min-height: 75.6rem; |
| .d-min-height7 | min-height: 91.2rem; |
| .d-min-height8 | min-height: 102.4rem; |
| .d-min-height-auto | min-height: auto; |
| .d-max-height1 | max-height: 10.8rem; |
| .d-max-height2 | max-height: 21.6rem; |
| .d-max-height3 | max-height: 33.2rem; |
| .d-max-height4 | max-height: 46.4rem; |
| .d-max-height5 | max-height: 62.8rem; |
| .d-max-height6 | max-height: 75.6rem; |
| .d-max-height7 | max-height: 91.2rem; |
| .d-max-height8 | max-height: 102.4rem; |
| .d-max-height-auto | max-height: auto; |