2

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.

cade galt
  • 3,843
  • 8
  • 32
  • 48
  • Based on how CSS follows rules, the `100%` would "overrule" the `auto`, but since `auto` got the `!important` as well, it will always overrule anything else, unless `100%` would get an `!important`, in which case the normal overruling-rule gets applied, since they are both at the same level of importance. – Rvervuurt Aug 23 '15 at 14:36
  • Since this is, according to the answer below, to get the wrapper to stick to the bottom in IE6, you might as well just remove it. IE6 should not be supported anymore. – Rvervuurt Aug 23 '15 at 14:38
  • Here `100%` is expected to be applied but `!important` to `auto` wont allow ` it to override and hence `auto` will be dominant – Domain Aug 23 '15 at 14:43
  • If it's all about the sticky footer, try out this fiddle I've once made for someone here on SO. It uses some javascript to check the height of the content, the viewport height etc, and then depending on that, it makes the footer fixed to the bottom or not: https://jsfiddle.net/emvpx8fr/ – Rvervuurt Aug 24 '15 at 07:20

1 Answers1

3

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • According to here, http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css `! important` breaks cascading rules and as such, I don't see what this has to do with what is suggested. – Zen-Lee Chai Aug 23 '15 at 14:39
  • @Zen-LeeChai — That's because the intended purpose of `!important` is for altering the cascade order between two different rulesets. This is a hack involving a single ruleset. – Quentin Aug 23 '15 at 14:41
  • @cadegalt — Yes, I do. Read the last sentence of the answer again. – Quentin Aug 23 '15 at 14:46
  • holy CSS, how do you know this, what torture did you go through to learn such hacks for such awesome browsers? – cade galt Aug 23 '15 at 14:48
  • 3
    I initially learned CSS when IE4 was the new shiny browser that would allow us to do amazing new things. My torture was the dawn of the new millennium. It was a much more educational torture than the previous one which was when the radio would play The Spice Girls a lot. – Quentin Aug 23 '15 at 14:52