Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS min-height

The min-height property sets the minimum height of an element.

It prevents an element from becoming any smaller than the specified value.

This property is used when the content is smaller than min-height, otherwise it has no effect.

Example

#

An element with a 300-pixel min-height value. Irrespective of the content, the element will not get any smaller than the min-height.

Henri Matisse was a French artist, known for both his use of color and his fluid and original draughtsmanship. He was a draughtsman, printmaker, and sculptor, but is known primarily as a painter.
<style>
  .min {
    border: 1px solid tomato;
    padding: 15px;
    min-height: 300px;
  }
</style>

<div class="min">
  Henri Matisse was a French artist,
  known for both his use of color and
  his fluid and original draughtsmanship.
  He was a draughtsman, printmaker, and
  sculptor, but is known primarily as a
  painter.
</div> 

Syntax

min-height: length | initial | inherit;

Values

#

Value Description
length Sets the minimum height. Use any valid CSS length value.
% Sets the minimum height in percent.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when min-height support started for each browser.

Chrome
1.0 Dec 2008
Firefox
3.0 Jun 2008
IE/Edge
7.0 Oct 2006
Opera
4.0 Jun 2000
Safari
2.0.2 Oct 2005

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides