ozblog

Introduction

It is often nice to have your webpage span the full height of the window even if you only have a small amount of content displaying at the top.

With min-height hack	Without min-height hack

The Problem

This is easy in standards compliant browsers like Firefox with the CSS min-height property. However IE (Internet Explorer) 5 and 6 doesn’t understand the min-height property.

Although IE doesn’t understand the min-height it will treat height almost as though it were min-height and will expand an element that contains its content even though the height has been set.

Standards compliant browsers on the other hand will not expand an element past the set height. So height cannot be used as min-height.

Defining both height and min-height in the same element won’t work because height will override the Min-height in standards compliant browsers.

The Solution

That’s when I came across this nifty little hack. Thanks http://www.dustindiaz.com/min-height-fast-hack/

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

The Explanation

So how dose it work? Let’s break it down.

height:

• In standards compliant browsers height is a fixed height, non expanding “not more not less”
• In IE height will set a fixed minimum height but will expand with the element if it exceeds the set height.

min-height:

• In standards compliant browsers min-height is, a fixed minimum height. “I want it to be at least this height” and will expand with the element simpler to height in IE.
• IE doesn’t support the min-height property.

!important

• An !important declaration can be likened to an override. It allows you to declare an overriding property, which will be considered taking precedence even if there are other rules with the same specificity declaring.
• IE6 ignores !important.

height: auto !important;

Let the actual final height auto-adjust (while obeying the declared min-height, of course). Even though auto is the default for any element’s height, we want to declare it because of the following rule.

So standards compliant browsers will see:

min-height: 500px;
height: auto;

IE6, on the other hand, due to ignoring !important and not understanding min-height, will see:

height: 500px;

And there you go min-height that works in all modern browsers.