47

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?

2
  • 2
    could you not just set the height to be your max height and set the overflow: scroll; ?
    – Jason
    Commented Jul 28, 2009 at 23:43
  • 1
    @Jason That works using a static height e.g. 200px. However, if your height is a percentage e.g. 100%, then overflowing content will override the specified height and just stretch element instead of clipping it or introducing scrollbars. Commented Apr 23, 2010 at 15:44

6 Answers 6

35

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.

7
  • There is a problem with this... it generates a warning on IE6 about active content.
    – mcherm
    Commented Mar 30, 2009 at 20:04
  • i have never used visual studio, but the css expression() is unique to internet explorer so i would hope their dev tools would recognize it.
    – ethyreal
    Commented Oct 21, 2010 at 21:10
  • overflow:auto and overflow-x:hidden FTW!! :) thanks for the fix
    – tomasdev
    Commented Mar 22, 2011 at 3:29
  • I tried doing this on a Dashboard UI I was building in jQuery and experienced serious lag in IE... Beware of performance issues.
    – pixelbobby
    Commented Apr 13, 2012 at 19:03
  • 20
    alternatively we could stop supporting IE 6
    – ethyreal
    Commented Apr 17, 2012 at 20:22
16

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

2
  • 9
    This only works in IE6 (the only browser that needs a hack at all anymore for this) for min-width/height, not max-width/height.
    – mercator
    Commented Aug 14, 2009 at 12:53
  • Correction (from the spec): "The percentage is calculated with respect to the height of the generated box's containing block." as such, the parent must have a height set in order for min/max-height (or width) to be used.
    – Kevin Peno
    Commented Apr 27, 2012 at 20:04
8
selector
{
    max-height:900px;
    _height:expression(this.scrollHeight>899?"900px":"auto");
    overflow:auto;
    overflow-x:hidden;
}
1
  • Anyone else try this one with success?
    – chainwork
    Commented Apr 23, 2012 at 16:59
1

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?

1
  • 1
    Good thought, but it still requires setting a base height to more than he wants for a block level element. Otherwise, he'd just set that height on the element he's really concerned with. Commented Nov 18, 2008 at 2:35
0

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.

-1

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

<style type="text/css">
.scroll{
    display:block;
    border: 1px solid red;
    padding:5px;
    margin-top:5px;
    width:300px;

    max-height:100px;
    overflow:scroll;
}
.auto{
    display:block;
    border: 1px solid red;
    padding:5px;
    margin-top:5px;
    width:300px;
    height: 100px !important;
    max-height:110px;
    overflow:hidden;
    overflow-y:auto;
}
</style>
<p>Example of scroll value:</p>

<div class="scroll">
    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.<br/>
    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.<br/>
    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.<br/>
    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.<br/>        
     </div>

<br />
<p>Example of auto value:</p>

<div class="auto">
    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.<br/>
   </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.