CSS min-height Property

The min-height property defines the minimum vertical space an element must occupy, ensuring it doesn't shrink smaller than that value even if empty.

selector { min-height: value; }
auto The default value that lets the browser calculate the minimum height based on the content.
<length> Defines a fixed minimum height using units like px, em, rem, or vh.
<percentage> Defines the minimum height as a percentage of the containing block's height.
max-content Sets the minimum height based on the intrinsic maximum height of the content.
min-content Sets the minimum height based on the intrinsic minimum height of the content.
fit-content Uses the available space but will not exceed the max-content value.

Code Examples

A basic example showing a div that maintains a minimum height regardless of its sparse content.

<div style="min-height: 200px; background-color: #333333; color: #ffffff; padding: 20px;">
  This box will always be at least 200 pixels tall, even with this small amount of text.
</div>

An advanced example demonstrating how a container respects its min-height but expands dynamically as content is added via JavaScript.

<div id="content-box" style="min-height: 150px; border: 2px solid #0066cc; padding: 15px;">
  <p>Click the button to inject more content and watch the box expand.</p>
</div>
<button onclick="addContent()">Add More Text</button>

<script>
function addContent() {
  const box = document.getElementById("content-box");
  const newPara = document.createElement("p");
  newPara.innerText = "This is extra content that forces the box to grow beyond its original min-height.";
  box.appendChild(newPara);
  // You can also change min-height on the fly via JS
  box.style.minHeight = "300px";
}
</script>

Pro Tip

To keep a footer at the bottom of a page with very little content, apply min-height: 100vh; to your main wrapper. This forces the layout to take up the full screen height, pushing the footer down, but still allows the page to scroll naturally if you add more content later.

Deep Dive

Think of min-height as a safety floor for your boxes. If you have a box with only one sentence of text, it might look tiny and break your layout. By setting min-height, you guarantee that the box stays at least a certain size. However, unlike the rigid height property, min-height is flexible. If your content grows and needs more space, the box will expand vertically to fit it. It effectively overrides the height property if the calculated height is less than the min-height value. This makes it a primary tool for building responsive containers that adapt to varying amounts of data without collapsing.

Best Practices

Use min-height instead of a fixed height for containers holding dynamic text. This ensures that if a user increases their browser's font size, the container can expand to prevent text from overflowing or clipping. It's also perfect for hero sections or main content areas where you want the section to fill at least the viewport height using 100vh, but still allow the page to grow if the content is longer than the screen.

Common Pitfalls

A major pitfall is using percentage values for min-height when the parent element doesn't have a defined height; the browser won't know what to calculate the percentage against and will often default to 0. Also, keep in mind that min-height will always win a fight against height and max-height if its value is larger than theirs.

Accessibility

Setting a fixed min-height that is too small for the content can lead to text overlapping or becoming unreadable when users zoom in. Always ensure your containers can grow. Test your layouts by increasing the text size to 200% to verify that the container expands and keeps all content visible and accessible within the flow of the document.

Dev Data Table: min-height property

default 0
animatable yes
inherited no
experimental no
year_intro 1998
year_standard 1998
js_syntax_1 element.style.minHeight = "250px";
js_syntax_2 element.style.setProperty("min-height", "250px");
js_note In JavaScript, the property follows camelCase naming as minHeight when accessed directly through the style object.
browsers { "Chrome": "1", "Edge": "12", "Firefox": "1", "Safari": "1", "Opera": "7", "Chrome Android": "18", "Safari on iOS": "1", "Samsung Internet": "1.0", "Opera Mobile": "10.1" }
results render here...