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>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>
