How to implement cross browser min-height and max-height at the same time?

Question

If only to implement max-height:

max-height:200px;
 height:auto !important;
 height:200px;
 overflow:hidden;

if only to implement min-height:

min-height:40px;
height:auto!important;
height:40px;

See?There is conflict on height!

What's the solution?

Answer 1

Here's a technique derived from an article on min-height and max-height in IE:

* html div#division { 
   height: expression(this.scrollHeight >= 200 ? "200px" : this.scrollHeight <= 40 ? "40px" : "auto");
}

div#division {
   min-height: 40px;
   max-height: 200px;
   overflow: hidden;
}

The expression value works only in IE, but works back as far as IE 5. Here, it keeps the height property within the desired range. Standards-compliant browsers will ignore this declaration, and instead use the min-height and max-height rules.

Caveat: JavaScript must be enabled in IE for expression to work.

The technique you are currently using might be preferred by the "use only pure CSS" crowd, but IMHO it is obscure and brittle. Using a non-standard, IE-specific value makes it clear that the code is written specifically to support IE. Not only is this self-documenting, it also makes it easier to migrate the IE-specific code into separate CSS files.

Answer 2

i assume you write your CSS like this because you want to support Internet Explorer, which does not recognize min-height max-height.

I suggest you move everything into a conditional stylesheet, that only IE will use:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

Read this for more info on this technique. It's the only proper way to deal with Explorer's issues.

Answer 3

If you want to go pure CSS, I'd go the conditional stylesheet route.

However, my preferred solution is just a touch of jQuery:

  $(document).ready() (function() {
    if ($("#division").height() > 200) {
        $("#division").height('200px');
    }
    if ($("#division").height() < 40) {
        $("#division").height('40px');
    }
  }