Min/Max Height

Definition

Utilities for setting the minimum and maximum height of an element.

Explain Like I'm New

Min-height guarantees a foundation. `min-h-screen` says: 'Be AT LEAST as tall as the monitor. If there's 10,000 lines of text, stretch downwards to fit it. But if the page is empty, don't collapse—stay as tall as the monitor so the footer stays at the bottom.'

Real World Example

Building a standard web layout where you want the footer pushed to the absolute bottom of the screen, even if the main page has zero content.

Common Use Cases

•Sticky footers
•Scrollable dropdown menus (`max-h-60`)

Interactive Example

Interview Questions

basic

What is the difference between `h-screen` and `min-h-screen`?

intermediate

How do you create a scrollable dropdown menu using max-height?

Flash Cards

Question

h-screen vs min-h-screen?

Click to reveal answer

Answer

`h-screen` is rigid; if content exceeds the screen height, it overflows and breaks the layout. `min-h-screen` is flexible; it starts at 100vh, but stretches taller if the content needs more room.

Question

Scrollable dropdown?

Click to reveal answer

Answer

Apply `max-h-64` (or any specific height) and `overflow-y-auto`. If the list is short, it fits naturally. If the list has 100 items, it stops growing at the max-height and adds a scrollbar.