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 scroll bars?

回答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.

回答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

回答3:

selector {     max-height:900px;     _height:expression(this.scrollHeight>899?"900px":"auto");     overflow:auto;     overflow-x:hidden; } 

回答4:

Could you have a wrapper div with the height set as your height and overflow: scrolling. Then the inner div has no height set and as it grows it will fill then use the scrollbars of the first div?

回答5:

Major hack (RedWolves-style):

.divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;} .divInner{border:1px solid navy;background-color:white;} 

I was getting no love from the max-height attribute so I had this alreadyand succeeded with these 2 classes. But it's ugly so in searching for better hit this question. divMax having position:absolute lets content underneath show through but controls the ultimate height of divInner to 200px.

回答6:

I found this from http://www.tutorialspoint.com/css/css_scrollbars.htm and modified a bit. It seems working for both IE9 and FF19

Example of scroll value:
  
     I am going to keep lot of content here just to show     you how scrollbars works if there is an overflow in     an element box. This provides your horizontal as well      as vertical scrollbars.
     I am going to keep lot of content here just to show     you how scrollbars works if there is an overflow in     an element box. This provides your horizontal as well      as vertical scrollbars.
     I am going to keep lot of content here just to show     you how scrollbars works if there is an overflow in     an element box. This provides your horizontal as well      as vertical scrollbars.
     I am going to keep lot of content here just to show     you how scrollbars works if there is an overflow in     an element box. This provides your horizontal as well      as vertical scrollbars.
  
Example of auto value:
  
     I am going to keep lot of content here just to show     you how scrollbars works if there is an overflow in     an element box. This provides your horizontal as well      as vertical scrollbars.
 

文章来源: CSS Max Height Property