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.
An element with a 300-pixel min-height
value.
Irrespective of the content, the element will not get any smaller than the min-height
.
<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>
min-height: length | initial | inherit;
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. |
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 |