CSS min-height Property

February 10, 2021 12:37 pm IST

❮ Prev Next ❯

You are Here:

CSS min-height Property

CSS min-height property specifies the minimum height of an element.

If the content is smaller than the minimum height, the minimum height will be applied.

If the content is larger than the minimum height, the min-height property has no effect.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #point{ min-height: 100px; border: 1px solid #000; } </style> </head> <body> <div id="point"> Minimum height of this container (div) is 100px; </div> </body> </html>

Run

Syntax

Using CSS

element{ min-height: 100px; }

Using Javascript

object.style.minHeight="100px";

Animatable

Yes, min-height property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS min-height property is 0px.

Property Value

The following table provides a list of values for CSS min-height property.

Value	Explanation
%	Specifies the minimum height as a percentage of the containing block's content height.
length	Specifies the minimum height (px, cm, etc) as an absolute value.

Using JavaScript

In the following example, we will demonstrate how to change the CSS min-height property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #point{ border: 1px solid #000; } </style> </head> <body> <div id="point"> Height of this container (div) is auto; </div> <button onclick="myFunction()">Click Me</button> <script> function myFunction(){ var x = document.getElementById("point"); x.style.minHeight = "100px"; } </script> </body> </html>

Run