Having both a fixed and a dynamic height

Hi all,

I am new to the forums and to CSS, so please for give my ignorance. Is it possible to have both a fixed height, then switch then switch to a dynamic height?

Here’s an html file I throw together to show, my problem, http://darkhelmet.site11.com/.

I don’t like how the paragrapths “bleed” out side of the section. I know that I can just have it as: height: auto; but the problem is that I want all of my web pages to be at least the same height so that will be all unformed regardless of how much text is on one page. I also know that I could just have it as: overflow: scroll; but I don’t like there being more than one scroll bar in the window.

Is the possible with CSS or do I have to use a javascript?


It sounds like you are looking for min-height

That will allow your div/element to hold itself open at the height value you give it and then expand when content is greater than that height.


Just set your desired height in place of that 200px

Note that min-height is not supported by IE6.
To have it also work in IE6 use

.someclass {
  min-height: 200px;
  height: auto !important;
  height: 200px;

ScallioXTX, you should really avoid doing that because it’s broken in IE (view FAQ for details on why to avoid this)

The PROPER way to serve this tot get IE6 working is

* html .someclass

Thanks everyone! This was just the tag I was looking for.

As far as I can see my solution is not covered in the FAQ.
I got it from here.

I’ve implemented it on several sites now and it works like a charm in IE6,IE7,IE8,FF,Opera and Chrome.

The only browser it won’t work in (as the article states) is IE5.x, but I stopped supporting that one ages ago.

As Ryan said I always recommend not to use that method because it is buggy in IE7 (and besides I hate the !important hack as it is an unnecessary and confusing hack (for beginners) :)).

To see the bug try this code in IE7 and then drag the bottom of the window up or down and then try it in other browsers to see what should happen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
html, body {
.someclass {
    min-height: 20%;
    height: auto !important;
    height: 20%;
<div class="someclass">

And besides the bug mentioned above the bugfree version is actually about 10 characters shorter and easier to understand::slight_smile:

.someclass{min-height: 20%}
* html .someclass{height:20%}

Than this:

.someclass {
    min-height: 20%;
    height: auto !important;
    height: 20%;

As Paul said it doesn’t :). It may appear to do so and many people still use it (such as Ryan Fait footers that we see float around here) but it has a problem in IE7 (which Paul gave you code to see)

Just run that code and you will see what we mean :slight_smile:

Yes I see what you mean. Doesn’t appear to be working in IE8 either (at least on my pc IE8 does the same thing wrong as IE7).
I’ll stop using it from now on and use the * html hack. Thanks :slight_smile:

Unfortunately neither your method nor my method works in IE8 due to it not re-flowing properly with percentage heights.:frowning: (opera has a similar bug)

IE8 needs the element to be display:table and have a height before it will work with my code above.

In reality the bug only crops up when doing things like the sticky footer where you are basing the height on a percentage of its parents height (which is why we see the bug quite a bit in the forums as sticky footers are still popular).

For min-height rules where you are using pixel heights then either method should work but I just feel it’s cleaner to do it without using !important :slight_smile:

It would be nice to just do it the right way and not have to dance around all these browsers - (I don’t think I can fit any more bug fixes in my brain).