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%;
.d-height100
.d-height10
.d-height90
.d-height20
.d-height80
.d-height25
.d-height75
.d-height30
.d-height70
.d-height40
.d-height60
.d-height50
.d-height50
<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;
108px
216px
332px
464px
628px
756px
912px
1024px
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;