ClampGenerator nviewsWEB LogoClampGenerator nviewsWEB Logo

You are using "height" clamp generator

Fluid height for banners, hero sections, or media. Remember vh includes mobile browser chrome — consider dvh for full-bleed sections.

Input Unit
Layout Property <px>
?
Fluid Range
Viewport Unit
?
Viewport Size <px>
?
Property Size <px>
?
Output
Output Unit

CSS clamp Generated Code to copy!

CSS
height: clamp(16px, calc(9.143px + 1.905vw), 32px);

Just need a plain clamp() value without picking a property? Try the simpler ClampCalculator.

What is a CSS Height Clamp()?

The clamp() function lets an element's height scale fluidly between a minimum and maximum value based on the viewport size, instead of jumping between fixed sizes at media query breakpoints.

Example:

height: clamp(180px, calc(120px + 18.75vw), 240px);

In this example the element never shrinks below 180px or grows past 240px, scaling smoothly in between. This tool is part of the free ClampGenerator toolkit.

Common Use Cases for Height Clamp()

  • ✅ Hero sections and banners that scale gracefully across devices
  • ✅ Media and image containers that keep a sensible aspect within limits
  • ✅ Cards and rows that need a comfortable minimum height without hard breakpoints
  • ✅ Sticky headers or navbars that shrink on scroll without a layout jump

height, min-height & max-height

  • height — a self-contained fluid size.
  • min-height — a floor for content-driven or flex/grid elements.
  • max-height — a ceiling so a fluid or percentage-based element never grows too tall.

👉 Switch between them using the property buttons above the calculator.

Export as CSS Variable, SCSS, or Tailwind

The generated code isn't limited to a plain CSS declaration. Choose an output format above the code box:

  • CSS — height: clamp(...);
  • CSS Variable — --hero-height: clamp(...);
  • SCSS — $hero-height: clamp(...);
  • Tailwind — 'hero-height': 'clamp(...)', ready to paste into tailwind.config.js

Using Height clamp() Carefully

  1. vh includes mobile browser chrome. On phones, 100vh is based on the largest possible viewport state and can overshoot the visible area when the address bar is showing. Use dvh (dynamic viewport height) for full-bleed mobile sections instead.
  2. height and aspect-ratio can conflict. If both are set on the same element, only one dimension stays auto-derived from the other — decide which one should drive the layout.
  3. Percentage height needs a sized ancestor. A percentage-based height only resolves if the parent element itself has a definite height — otherwise it computes to auto.
  4. height has no effect on non-replaced inline elements, same rule as width — set display: block, inline-block, or flex first.
  5. Prefer block-size for logical, writing-mode-aware layouts. Try the dedicated Block-Size Clamp Generator to generate it directly.

Height Clamp Generator FAQs

How does height clamp() help in responsive design?

It allows an element to resize between a defined minimum and maximum height, adapting seamlessly to various viewport sizes without writing a single media query.

What's the difference between height, min-height, and max-height with clamp()?

height sets a fluid, self-contained size. min-height sets a floor a flexible element will never shrink below. max-height sets a ceiling for content-driven or percentage-based elements. All three accept the same clamp() output from this tool.

Should I use vh or dvh for a height clamp()?

vh is fine for most desktop layouts, but on mobile it's based on the largest possible browser UI state and can leave a gap when the address bar is visible. dvh (dynamic viewport height) adjusts live as mobile browser chrome shows or hides — better for full-bleed mobile sections.

Can I use this height clamp generator for hero sections and banners?

Yes — height clamp() is ideal for hero sections, banners, media, and cards that need to shrink on mobile and grow on desktop without hard breakpoints.

Can I export the height clamp value as a CSS variable, SCSS, or Tailwind config?

Yes. Switch the output format above the code box to CSS Variable, SCSS, or Tailwind, and edit the name field to control the variable or config key used.

Is this height clamp generator free to use?

Yes, it's completely free with no login required, and works offline once the page has loaded.

Need width, margin, padding, or gap too?

Use our all-in-one Layout & Spacing Clamp Generator, which covers those properties alongside height in a single tool.

Guides