Dialtone
GitHub Repo
Codepen Template

Height

Utilities to control an element's height.

Classes

ClassOutput
.d-h10pheight: 10% !important;
.d-h20pheight: 20% !important;
.d-h25pheight: 25% !important;
.d-h30pheight: 30% !important;
.d-h40pheight: 40% !important;
.d-h50pheight: 50% !important;
.d-h60pheight: 60% !important;
.d-h70pheight: 70% !important;
.d-h75pheight: 75% !important;
.d-h80pheight: 80% !important;
.d-h90pheight: 90% !important;
.d-h100pheight: 100% !important;
.d-h0height: 0px !important;
.d-h1height: 1px !important;
.d-h2height: 2px !important;
.d-h4height: 4px !important;
.d-h6height: 6px !important;
.d-h8height: 8px !important;
.d-h12height: 12px !important;
.d-h16height: 16px !important;
.d-h24height: 24px !important;
.d-h32height: 32px !important;
.d-h42height: 42px !important;
.d-h48height: 48px !important;
.d-h64height: 64px !important;
.d-h72height: 72px !important;
.d-h84height: 84px !important;
.d-h96height: 96px !important;
.d-h102height: 102px !important;
.d-h114height: 114px !important;
.d-h128height: 128px !important;
.d-h164height: 164px !important;
.d-h216height: 216px !important;
.d-h264height: 264px !important;
.d-h332height: 332px !important;
.d-h464height: 464px !important;
.d-h512height: 512px !important;
.d-h628height: 628px !important;
.d-h764height: 764px !important;
.d-h828height: 828px !important;
.d-h912height: 912px !important;
.d-h1024height: 1024px !important;
.d-h1140height: 1140px !important;
.d-h1268height: 1268px !important;
.d-h1340height: 1340px !important;
.d-h100vhheight: 100vh !important;
.d-h-autoheight: auto !important;
.d-h-unsetheight: unset !important;

Percentages

Use d-h{n}p to set a percentage height for an element.

<div class="d-h216">
  <div class="d-h10p">d-h10p</div>
  <div class="d-h20p">d-h20p</div>
  <div class="d-h25p">d-h25p</div>
  <div class="d-h30p">d-h30p</div>
  <div class="d-h40p">d-h40p</div>
  <div class="d-h50p">d-h50p</div>
  <div class="d-h60p">d-h60p</div>
  <div class="d-h70p">d-h70p</div>
  <div class="d-h75p">d-h75p</div>
  <div class="d-h80p">d-h80p</div>
  <div class="d-h90p">d-h80p</div>
  <div class="d-h100p">d-h100p</div>
</div>

Fixed

Use d-h{n} to set a fixed height for an element.

<div class="d-hmn264">
  <div class="d-h0">1</div>
  <div class="d-h1">2</div>
  <div class="d-h2">3</div>
  <div class="d-h4">4</div>
  <div class="d-h6">5</div>
  <div class="d-h8">6</div>
  <div class="d-h12">7</div>
  <div class="d-h16">8</div>
  <div class="d-h24">9</div>
  <div class="d-h32">10</div>
  <div class="d-h42">11</div>
  <div class="d-h48">12</div>
  <div class="d-h64">13</div>
  <div class="d-h72">14</div>
  <div class="d-h84">15</div>
  <div class="d-h96">16</div>
  <div class="d-h102">17</div>
  <div class="d-h114">18</div>
  <div class="d-h128">19</div>
  <div class="d-h164">20</div>
  <div class="d-h216">21</div>
  <div class="d-h264">22</div>
  <div class="d-h332">23</div>
  <div class="d-h464">24</div>
  <div class="d-h512">25</div>
  <div class="d-h628">26</div>
  <div class="d-h764">27</div>
  <div class="d-h828">28</div>
  <div class="d-h912">29</div>
  <div class="d-h1024">30</div>
  <div class="d-h1140">31</div>
  <div class="d-h1268">32</div>
  <div class="d-h1340">33</div>
</div>

Screen

Use d-h100vh to have an element cover the user's viewport.

<div class="d-h100vh">...</div>

Auto

Use d-h-auto have the browser calculate and select a height.

<div class="d-h-auto">...</div>
Last Updated: