Minimum height on vertically expandable div

Question

Hey,

Is there a way to set a minimum height for a div, but still allow it to be expandable?

For example, I want a div to have an exact height of 300px when my page loads. However, if more content is added to the div with javascript, I want it to expand after that.

If I specify a height and the content expands past the div, it either clips or adds scrollbars, depending on the value of overflow.

If I don't specify a height, it only expands as far as the content.

Thanks

Here's the solution I used to fix this on ie6, courtesy of Dustin Diaz

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

Answer 1

The CSS property min-height does exactly this. Note that it does not work properly in IE6, however IE6 treats the height property as min-height, so you can use IE conditional comments to set a height property in a style sheet that is only loaded by IE6.