CODEWITHSUNDEEP
css
cade galt
cade galt

Reputation: 4171

Why would one use two height attributes?

I was reading a popular link by ryanfait

and he uses:

height: auto !important;
height: 100%;

First question, is I have not seen two of the same attributes like this before, why isn't this in one line, and secondly, what do these two lines do in combination.

I have a situation where I want to have the height of a div take up the height of its parent div, that's why I ask.

Upvotes: 2

Views: 79

Answers (1)

Quentin
Quentin

Reputation: 943686

From further down the page you quote:

The height: auto !important; and height: 100%; properties

I've been getting about an email a week informing me that the footer works fine without height: auto !important; and height: 100%; in the wrapper selector. This is a way to achieve minimum height in IE6 and below, so if you want the footer to stick to the bottom of the page in Internet Explorer 6, don't remove it!

In CSS:

  • min-height is set to 100%.
  • height is set to auto because the !important rule wins.

In IE6, thanks to a combination of three different bugs:

  • The min-height rule is ignored because it isn't supported.
  • The height: 100% rule overrides height: auto !important because IE6 always lets the later rule in a rule-set win even when !important is in play.
  • height: 100% is treated as min-height because IE6's implementation of height is broken.

In short: height: 100% is a hack to fake min-height support in IE6. height: auto !important stops that hack from having side effects in better browsers.

Upvotes: 3

Related Questions