CSS min-height PropertyS2C Home « CSS min-height Property
Definition
The CSS min-height property allows us to specify a minimum content height for a box model element.
Applies To
All elements except non-replaced inline elements, table rows and row groups .
Property Values
negative values are NOT acceptable when using the CSS min-height property..
inherit - The element will inherit the min-height property of its parent element.
length - Defines a length value in a unit measurement such as em or pixel.
n% - A percentage value relative to the parent element where n is a number.
Default Value
Default value is set to 0 for the min-height property value.
Inheritance
The min-height property is NOT inherited from the parent element unless specified using the inherit property value.
Browser Anomalies
IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.
Example
<!DOCTYPE html>
<!-- Our HTML/CSS for the CSS min-height property follows -->
<html lang="en">
<head>
<title>CSS Reference - CSS min-height Property</title>
<!-- Valid values for CSS min-height Property are:
inherit, length and percentage value.
-->
<style type="text/css">
#img1 {
min-height: 150px;
}
#img2 {
min-height: 300px;
}
</style>
</head>
<body>
<h1>CSS min-height Property</h1>
<h2>Image with min-height of 150 pixels</h2>
<p>
<img id="img1" src="https://server2client.com/images/beefalepiesmall.jpg"
alt="Beef and Ale Pie">Look at the image height.</p>
<h2>Same image with min-height of 300 pixels</h2>
<p>
<img id="img2" src="https://server2client.com/images/beefalepiesmall.jpg"
alt="Beef and Ale Pie">Look at the image height.</p>
</body>
</html>
How It Looks
The results of using the min-height property with the values above will look something like the following:
When you cut and paste the code, adjust the screen size to see the effects of the min-height property.
Relevant CSS Tutorial
CSS Intermediate Tutorials - Lesson 2 - A Final Look At The Box Model
Homepage
Top