Setting max-height AND min-height property in CSS (or via jQuery)

Question

I have a simple but annoying problem. I need to set min-height AND max-height of a div element.

For example: min-height: 100px and max-height: 200px. I load my page with div height 200px. If i squeeze my browser window, this div resizes and when it hits height=100px it stops resizing.

Of course min-height and max-height in CSS is not working. :/

Anyone?

Thanks.

Solution 1

Also set height.

min-height: 100px;
max-height: 200px;
height: 100%;

Solution 2

Min height always overwrites height and max-height, so you can't just use both.

This is kind of a hack, but you could do it with media queries. If this is your HTML:

<div id="myDiv"></div>

Then add this to your css:

#myDiv{
    height:200px;    
}
@media screen and (max-height: 200px) {
    #myDiv {
        height:99vh; /*Set this with trial and error because it depends on your margins*/
    }
}
@media screen and (max-height: 100px) {
    #myDiv {
        height:100px;
    }
}