min-h-screen for sticky footers; max-h-* for scrollable regions. This family contains 87 generated classes in Nakshora 3.0.

Classes#

ClassGenerated CSS
max-h-0max-height: 0px;
max-h-1max-height: 0.25rem;
max-h-2max-height: 0.5rem;
max-h-3max-height: 0.75rem;
max-h-4max-height: 1rem;
max-h-5max-height: 1.25rem;
max-h-6max-height: 1.5rem;
max-h-7max-height: 1.75rem;
max-h-8max-height: 2rem;
max-h-9max-height: 2.25rem;
max-h-10max-height: 2.5rem;
max-h-11max-height: 2.75rem;
max-h-12max-height: 3rem;
max-h-14max-height: 3.5rem;
max-h-16max-height: 4rem;
max-h-20max-height: 5rem;
max-h-24max-height: 6rem;
max-h-28max-height: 7rem;
max-h-32max-height: 8rem;
max-h-36max-height: 9rem;
max-h-40max-height: 10rem;
max-h-44max-height: 11rem;
max-h-48max-height: 12rem;
max-h-52max-height: 13rem;
max-h-56max-height: 14rem;
max-h-60max-height: 15rem;
max-h-64max-height: 16rem;
max-h-72max-height: 18rem;
max-h-80max-height: 20rem;
max-h-96max-height: 24rem;
max-h-pxmax-height: 1px;
max-h-0.5max-height: 0.125rem;
max-h-1.5max-height: 0.375rem;
max-h-2.5max-height: 0.625rem;
max-h-3.5max-height: 0.875rem;
max-h-nonemax-height: none;
max-h-fullmax-height: 100%;
max-h-screenmax-height: 100vh;
max-h-svhmax-height: 100svh;
max-h-lvhmax-height: 100lvh;
max-h-dvhmax-height: 100dvh;
max-h-minmax-height: min-content;
max-h-maxmax-height: max-content;
max-h-fitmax-height: fit-content;
min-h-0min-height: 0px;
min-h-1min-height: 0.25rem;
min-h-2min-height: 0.5rem;
min-h-3min-height: 0.75rem;
min-h-4min-height: 1rem;
min-h-5min-height: 1.25rem;
min-h-6min-height: 1.5rem;
min-h-7min-height: 1.75rem;
min-h-8min-height: 2rem;
min-h-9min-height: 2.25rem;
min-h-10min-height: 2.5rem;
min-h-11min-height: 2.75rem;
min-h-12min-height: 3rem;
min-h-14min-height: 3.5rem;
min-h-16min-height: 4rem;
min-h-20min-height: 5rem;

…and 27 more in this family — search by class name to find the exact one.

Example#

example
html
<body class="min-h-screen flex flex-col">
  <main class="flex-1">…</main>
</body>

Responsive & variants#

Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • min-h-screen + flex column + flex-1 main = sticky footer (see cookbook/sticky-footer|the cookbook)

utilities/layout/aspect-ratio|Aspect ratio · utilities/spacing/spacing-scale|Spacing scale