min-height.md

title	Min-height
description	Utilities to control an element's minimum height.
keywords	minimum height mnh min block size min block-size

Layout stops

Use d-hmn-{stop} to set a fixed minimum height for an element using layout token stops. The hyphen before the number indicates a layout token reference, e.g. d-hmn-100 outputs min-block-size: var(--dt-layout-100) (64px). This can be combined with d-h{n}p and d-hmx-{stop} to have an element fill a certain height range.

[!INFO] Scale-indexed vs pixel-indexed stops Bare integer stops (25, 50, 100, …) are scale-indexed on the 64px base — value_in_px = stop × 64 / 100, so 25 = 16px and 100 = 64px. Stops with a px suffix (1px, 2px, 8px, 20px, 24px) are off-scale exceptions that encode the literal pixel value.

<dt-stack direction="row" gap="200" align="start" justify="center" class="d-w100p">
  <dt-stack direction="row" align="center" justify="center" class="d-py-200 d-px-100 d-w-100 d-h-75 d-hmn-100 d-bgc-moderate d-bar4 d-ta-center">1</dt-stack>
  <dt-stack direction="row" align="center" justify="center" class="d-py-200 d-px-100 d-w-100 d-h-75 d-hmn-150 d-bgc-moderate d-bar4 d-ta-center">2</dt-stack>
  <dt-stack direction="row" align="center" justify="center" class="d-py-200 d-px-100 d-w-100 d-hmn-500 d-bgc-moderate d-bar4 d-ta-center">3</dt-stack>
</dt-stack>
<!-- @code -->
<div class="d-hmn-100">...</div>  <!-- min-block-size: var(--dt-layout-100) = 64px / 6.4rem -->
<div class="d-hmn-150">...</div>  <!-- min-block-size: var(--dt-layout-150) = 96px / 9.6rem -->
<div class="d-hmn-500">...</div>  <!-- min-block-size: var(--dt-layout-500) = 320px / 32rem -->

Percentages

Use d-hmn{n}p to set a minimum height percentage for an element. No hyphen before the number, p suffix indicates a literal percentage value. Note: d-hmn33p = 33.333% and d-hmn66p = 66.667%.

<!-- @wrapper -->
<dt-stack direction="row" gap="200" align="start" justify="center" class="d-w100p d-h-400">
  <dt-stack direction="row" align="center" justify="center" class="d-py-200 d-px-100 d-w-100 d-hmn33p d-bgc-moderate d-bar4 d-ta-center">1</dt-stack>
  <dt-stack direction="row" align="center" justify="center" class="d-py-200 d-px-100 d-w-100 d-hmn66p d-bgc-moderate d-bar4 d-ta-center">2</dt-stack>
  <dt-stack direction="row" align="center" justify="center" class="d-py-200 d-px-100 d-w-100 d-hmn100p d-bgc-moderate d-bar4 d-ta-center">3</dt-stack>
</dt-stack>
<!-- @code -->
<div class="d-hmn33p">...</div>  <!-- min-block-size: 33.333% -->
<div class="d-hmn66p">...</div>  <!-- min-block-size: 66.667% -->
<div class="d-hmn100p">...</div> <!-- min-block-size: 100% -->

Keywords

Use keyword utilities to set minimum height using CSS keyword values.

<div class="d-hmn-auto">...</div>
<div class="d-hmn-unset">...</div>
<div class="d-hmn-fit-content">...</div>
<div class="d-hmn-max-content">...</div>
<div class="d-hmn-min-content">...</div>

<script setup> import { percentage, layout, keywords } from '@data/width-height.json'; import ClampedTableWrapper from '@baseComponents/ClampedTableWrapper.vue'; </script>

Classes

Class	Output
.d-hmn-{{ i.stop }}	min-block-size: var(--dt-layout-{{ i.stop }}) !important; /* {{ i.px }}px / {{ (i.px / 10).toFixed(1) }}rem */
.d-hmn{{ i }}p	min-block-size: {{ i === 33 ? '33.333' : i === 66 ? '66.667' : i }}% !important;
.d-hmn-{{ i }}	min-block-size: {{ i }} !important;