Dialtone

Max-height

Utilities to control an element's maximum height.

Classes

ClassOutput
.d-hmx10pmax-height: 10% !important;
.d-hmx20pmax-height: 20% !important;
.d-hmx25pmax-height: 25% !important;
.d-hmx30pmax-height: 30% !important;
.d-hmx40pmax-height: 40% !important;
.d-hmx50pmax-height: 50% !important;
.d-hmx60pmax-height: 60% !important;
.d-hmx70pmax-height: 70% !important;
.d-hmx75pmax-height: 75% !important;
.d-hmx80pmax-height: 80% !important;
.d-hmx90pmax-height: 90% !important;
.d-hmx100pmax-height: 100% !important;
.d-hmx0max-height: 0px !important;
.d-hmx1max-height: 1px !important;
.d-hmx2max-height: 2px !important;
.d-hmx4max-height: 4px !important;
.d-hmx6max-height: 6px !important;
.d-hmx8max-height: 8px !important;
.d-hmx12max-height: 12px !important;
.d-hmx16max-height: 16px !important;
.d-hmx24max-height: 24px !important;
.d-hmx32max-height: 32px !important;
.d-hmx42max-height: 42px !important;
.d-hmx48max-height: 48px !important;
.d-hmx64max-height: 64px !important;
.d-hmx72max-height: 72px !important;
.d-hmx84max-height: 84px !important;
.d-hmx96max-height: 96px !important;
.d-hmx102max-height: 102px !important;
.d-hmx114max-height: 114px !important;
.d-hmx128max-height: 128px !important;
.d-hmx164max-height: 164px !important;
.d-hmx216max-height: 216px !important;
.d-hmx264max-height: 264px !important;
.d-hmx332max-height: 332px !important;
.d-hmx464max-height: 464px !important;
.d-hmx512max-height: 512px !important;
.d-hmx628max-height: 628px !important;
.d-hmx764max-height: 764px !important;
.d-hmx828max-height: 828px !important;
.d-hmx912max-height: 912px !important;
.d-hmx1024max-height: 1024px !important;
.d-hmx1140max-height: 1140px !important;
.d-hmx1268max-height: 1268px !important;
.d-hmx1340max-height: 1340px !important;
.d-hmx-automax-height: auto !important;
.d-hmx-unsetmax-height: unset !important;

Example

Use d-hmx{n}p or d-hmx{n} to set a maximum height percentage for an element. This can be combined with d-h{n}p and d-hmn{n} to have an element fill a certain height range.

<div class="d-h216">
    <div class="d-h72 d-hmx50p">1</div>
</div>
Last Updated: