Yes, it even works in IE
For max-height, we go for this
|
1 2 3 4 |
max-height:200px; height:auto !important; height:200px; overflow:hidden; |
For min-height, we go for this
|
1 2 3 |
min-height:40px; height:auto!important; height:40px; |
To use both at the same time
|
1 2 3 4 5 6 7 8 9 |
* html div.constraint { height: expression(this.scrollHeight >= 200 ? "200px" : this.scrollHeight <= 40 ? "40px" : "auto"); } div.constraint { min-height: 40px; max-height: 200px; overflow: hidden; } |
The expression value only works for IE and will require javascript, so that’s fine to use. One caveat: Dont’ use it if you have a choice.
With a little jQuery this will be even easier. This will be the DOM, note that we specified the maxHeight and minHeight as attributes
|
1 |
<div class="constraint" _maxHeight=200 _maxWidth=40></div> |
In the JavaScript, for each of those div of class constraint, we will correct the width and height accordingly
|
1 2 3 4 5 6 7 8 |
$('.constraint').each( function(){ if($(this).height() > $(this).attr('_maxHeight')){ $(this).height($(this).attr('_maxHeight')); } if($(this).height() < $(this).attr('_minHeight')){ $(this).height($(this).attr('_minHeight')); } }); |
If all else fails, we could always fall back to the traditional and all-powerful conditional stylesheet, note that conditional stylesheet will only affect IE users with width and height of constraint elements be set manually.
|
1 2 3 |
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie-only.css" /> <![endif]--> |