CSS Max Height Property
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?
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.
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