CSS Max Height Property

Question

Is there a good cross-browser way to set a max-height property of a DIV and when that DIV goes beyond the max-height, it turns into an overflow with scrollbars?

Answer 1

Sadly IE6 doesn't so you have to use an expression for IE6, then set the max-height for all other browsers:

 div{        _height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE6 */        max-height: 333px; /* sets max-height value for all standards-compliant browsers */        overflow:scroll; } 

Overflow:auto would most likely work in most cases for have any extra spill over.

Answer 2

I found this solution from a post made in 2005 (Min-Height Fast hack). It's a hack but it's simple and pure CSS:

selector {   max-height:500px;   height:auto !important;   height:500px; } 

The example is for max-height, but it works for min-height, min-width and max-width. :)

*Note: You must use absolute values, percentages don't work.

All you need now is the "overflow:scroll;" to make this work with scroll bars