February 5th, 2007 - by Paul OB

Although IE (Internet Explorer) 5 and 6 don’t understand the CSS min-height property they can easily be made to understand it by simply using height instead. They 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.

In this article we examine the CSS min-height property and learn best practices for allowing it to work across all browsers.

This makes it easy to implement min-height in IE5-6 because all you need to do is to set a height. Unfortunately, I often see examples where height and min-height are set in the same element and the author wonders why it doesn’t work. e.g.


#outer{
height:500px;
min-height:500px;
}

Ignoring IE6 and under there is no point in setting height and min-height on the same element because all you will get is a fixed height and not min-height at all. The element will be set at a fixed height of whatever is the greatest height. If min-height is 200px and height is 500px then all you get is 500px height. If for some strange reason you specified a min-height of 500px and a height of 200px you would either get a fixed height of 200px or a fixed height of 500px depending on browser. Either way all you get is a fixed height.

If you need a height range then you would set min-height and then max-height but not height (Note: IE6 and under don’t support max-height either and there is no way to mimic it apart from scripting or via an expression.)

Therefore to cater to IE6 and under we need to hide the height property from other browsers and just give it to IE6 and under. This can easily be accomplished using the star selector hack (* html) which only IE6 and under will parse:

  1. #outer{
  2. min-height:500px;
  3. background:red;
  4. }
  5. /* mac hide \*/
  6. * html #outer{height:500px}
  7. /* end hide */

As you can see from above I have added the IE5 mac filter to stop IE5 mac from reading the height because although it does not understand min-height it does implement height correctly and would fix the height at 500px which we don’t really want. It’s best just to let IE5 mac have height auto and expand with content.

There is an alternative version using the child selector (>) to hide styles from IE6 and it goes like this:

  1. #outer{
  2. height:500px;
  3. min-height:500px;
  4. background:red;
  5. }
  6. html>body #outer{height:auto}

It’s a little neater and less code and just over-rides the height setting using the child selector to redefine the height to auto. IE5 mac understands the child selector so we don’t need any filters or hacks with this method (although strictly speaking we are using the child selector as a hack). Whichever method you use is up to you but I must point out a problem I have found with IE7 when using the latter method in a 100% height scenario.

This is the code that should give the browser a min-height of 100% in IE6 and under and also in browsers that understand min-height like IE7 and firefox.

  1. html,body{height:100%}
  2. #outer{
  3. height:100%;
  4. min-height:100%;
  5. background:red;
  6. }
  7. html>body #outer{height:auto}/* not ie6- */

Try out this demonstration and make sure your browsers window is minimised to about half the monitor size then click refresh.

You should see that the page is covered in a 100% red background. Now grab the bottom of the browser window and pull the window downwards to make it bigger.

In IE7 the red background doesn’t follow the window down but stays at the initial height.

It seems as though the re-definition of height is causing a different display behaviour for some reason. If the height auto is added at the end of the original block instead (just for testing) then this problem doesn’t occur. It only happens when the height is redefined in a new style block!

The solution however is quite easy and all you need do is to redefine min-height again in the second style.

e.g. html>body #outer{height:auto; min-height:100%;}

There you have it – min-height for most browsers and an IE7 bug squashed at the same time.

38 Responses to “CSS min-height Explained”

1 Golgotha

This article would have helped me out a ton awhile back…

2 Web Design Forum

Great article Paul!

3 Chriss

Thanks, this is exactly the information I needed. Very clear and precise.

4 Magnus

Great article, been moaping around this for a long time, thanks allot!

5 What CSS Did We Learn in 2007

[...] CSS min-height Explained [...]

6 TheKat

I’m probably not understanding this very well. But if I am, you’re talking about a scrollbar appearing when there is no reason for it.

If this is the case – I have a case for you. My scrollbar is horizontal. I applied the same theories in width. Still no help. Any ideas?

Kat

7 TheKat

Sorry! I should have included the link:

http://www.kpdirection.com
http://www.kpdirection.com/style/basic.css

Kat

8 TheKat

Uh… heh-heh. I saw my school-girl error. All fixed now! I do appreciate all of your instruction here. I’ve learned a ton. A great find indeed!

Kat

9 Web Design Sydney

Thanks for the info,
I needed this for a Drupal theme that hadn’t taken it into account.
Steve.

[...] the whole article on: http://www.search-this.com/2007/02/05/css-min-height-explained Sphere: Related [...]

11 Arno Gerritsen

It doesn’t work here. I dunno what I am doing wrong but in firefox it doesn’t support the source which I got from here.

12 Paul OB

Hi Arno,

The code does work so you must be doing something wrong. You’ll have to provide a link or some more information if you want helps with this.

13 David

Hm.. I’ve found this resource today and.. Paul, it’s great! Very useful and informative. I’ll bookmark your site right now! :) Thank’s!

14 Paul OB

Thanks David, I’m sure you’ll find something to keep you interested.:)

15 Octopus Ink » Blog Archive » Min Height full height.

[...] CSS min-height explained (from Search This): A newer hack that’s similar to Dustin Diaz’s. [...]

16 Eduardo Lima

Great article. Thanks!

17 Willis White

the following code seems to work for me

#divTabFrame
{
min-height:500px; /*this is for FF*/
height:70% /*this is for IE6*/
}

18 Tim

“there is no point in setting height and min-height on the same element because all you will get is a fixed height and not min-height at all.”

Not true if your intention is to create a flexible layout where the height is 100%, thereby growing when the user makes the browser larger, but you want to have a min-height that should kick in when they size it smaller.

19 Rony

Awesome mate. Well explained and it worked for me.

20 stevewoodzell

For some reason, this is not working for me. Where did I go wrong?? It doesn’t seem to change anything in IE7 or 6

.main {
position: relative;
width: 876px;
height: 420px;
min-height: 420px;
padding: 15px;
margin: 0 auto;
}

html>body .main {height:auto;}

21 MrGamma

A total life saver… I have just been through hell with a much more complicated hack solution which relied on JavaScripts and conditionals…

Even though I tested it in every browser, reports still came in from the odd user who said differently. Complicated hacks aren;t worth it. This is simple. Much more elegant. Thank you.

22 Vanshi

very helpful article. Solved my min-height issues in IE6 and IE7. Thanks

23 Gabe

Thank you so much. U rock. ’nuff said.

24 nawaraj

the best method is this…

min-height: 140px;
height: auto !important;
height: 140px;

25 Paul OB

@nawaraj – No that is the worst method as far as I am concerned.:)

Not only does it exhibit the same IE7 bug I mention at the end of the article it mis-uses !important and has actually caused people not to understand the way that the !important rule works. Consequently most people don’t think it works in IE6 when it works very well.

It’s only a hack because IE doesn’t understand 2 rules the same in a block and only actions the last one it sees. In normal use !important works fine.

Using !important as a hack is ugly and unnecessary and I advise against using it. Not only does it mix hacks in with the clean code it makes it harder to debug later on if styles are modified further along.

Always remove your hacks from the clean code and only apply them to the browser that has the problem. Why make all browsers read 2 rules when it’s only IE6 that has the problem?

As an aside my method actually uses less code than yours.

e.g.
.test{min-height:500px}
* html .test{height:500px}

Therefore avoid the !important hack like the plague.:)

26 Vee

Worked like a charm, thanks!

27 The Webmaster

this is awesome. it works perfectly. I was really happy to find this

28 Anitha

Thanks a ton Paul!

29 disha

I used

#outer {
min-height:500px;
height:auto !important;
height:500px;
}
it worked for me

30 Paul OB

@disha: The !important hack is rather an ugly hack because it makes other browsers work rather than targeting the browser with the problem.

It is also not fullproof in IE7 in some very odd cases (especially with min-height:100%) and therefore I recommend the following which is less characters and doesn’t suffer from any issues in IE7 at all.

#outer {min-height:500px;}
* html #outer {height:500px}

31 min-height in ie6 - Website Babble Webmaster Forums

[...] googled this, there are worse, better and just different ways to do this. I'd probably go with Dustin Diaz's or Stu Nicholls' solutions. [...]

32 Paul OB

@last poster see my last post :)

33 Paul

Hi Paul,

I’m trying to get a page of a fixed width floating centrally horizontally, which is the full height of the window, but which shows a vertical scrollbar if the browser height is reduced below a certain value – say 800px.

I think that the code you are discussing here should do that but I’m not sure. I’ve tried incorporating the code at the top but the scrollbar never appears.
the css I’ve got so far is:

html,body
{
height:100%;
}

body
{
padding:0px;
background-image:url(‘txblueblank.jpg’);
}

#container
{
width:800px;
height:100%;
min-height:800px;

margin-left:auto;
margin-right:auto;
position: absolute;
top: 0px;

left: 50%;
margin-left:-400px;

background-color:white;
}

html>body #container /* not ie6- */
{
height:auto;min-height:800px;
}

Using IE7 – Can I do what I’m trying to do, and if so what am I doing wrong please?

Many thanks,
paul.

34 Paul OB

Hi,

@Paul: This is unlikely to be what you want as it will probably result in scrollbars on the window and on the element.

html, body {
height:100%;
margin:0;
padding:0
}
body {
background-image:url(‘txblueblank.jpg’);
}
#container {
width:800px;
height:100%;
min-height:800px;
margin:auto;
background-color:red;
overflow:auto;
}
(won’t work in ie6)

The problem is that 800px min-height will be higher than the viewport in most cases and a scrollbar on the viewport will be needed.

If you just want the scrollbar on the element then just use height:100% and no min-height and use overflow:auto to create the scrollbar on the element.

If you want to vertically center an element of fixed height then check through the css articles on here as that has been covered.

35 Paul

Many thanks Paul – I’ll have a play with those.

Thanks for taking the time,
Paul.

36 naz

thank you for the article.

37 Saurabh

.clear {
clear: both;
height: 0;
line-height: 0;
}

Height problem in ie7 and solution please give me suggation.

38 Paul OB

@Saurabh : You’ll have to clarify the problem a bit (even though it doesn’t seem related to the article).

That code looks like an old fashioned clearing element so you’ll need to give us a hint as to what’s wrong.

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading