CSS min-height – set minimum height of an element

CSS min-height property is used to set minimum height of a box element. Few points to note about min-height

  • It cannot be negative.
  • If min-height is greater than max-height or height, then min-height value overrides them.

CSS property min-height

CSS version: CSS 2.1
Value: length | percentage | none | inherit
Initial: 0
Applies to: all elements but non-replaced inline elements, table columns, and column groups
Inherited: no

Example – min-height pixel value

<style type="text/css">
.box {
  width:200px;
  min-height: 100px;
  height: 10px; /* will be overridden */
  max-height:10px; /* will be overridden */
  background-color: lightgreen;
}
</style>

<div class="box">
min height 100px
</div>
refresh

Example – min-height pecentage value

<style type="text/css">
.outer {
   width:200px; height: 100px;
  background-color: lightgray;
}
.box {
  width: 200px;
  min-height: 50%;
  background-color: lightgreen;
}
</style>
<div class="outer">
  <div class="box">
    min height 50%
  </div>
</div>
refresh

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments