CSS two min-height values, whichever's bigger

Question

I have a window that I want to fill the entire screen so that the footer is always off of the screen. I accomplished this with min-height:

#cnt
{
    min-height: calc(100% - 62px);
}

However, there are some cases in which that might be too small for a sidebar that I have created. The minimum height of the sidebar is 404px. How can I use both of these so that it uses the greater value? Can this be done with strict CSS or do I need JS?

This doesn't work:

#cnt
{
    min-height: calc(100% - 62px);
    min-height: 404px;
}

It just ends up using the 404px value always.

Edit:

Here's my JS/jQuery solution. The one problem I've found is that my browser's $(window).height() is returning a value that's like 400px greater than what it should be. Also, when resizing, it jumps back and forth between one value (+377px) and another (+787px) where the + means it's that much greater than it actually is. To fix this, I used the height of the <cnt> element itself, but this has the same jump back-and-forth size issue.

$(window).resize(function(){

    if($("cnt").outerHeight() < 404)
    {
        $("cnt").css("min-height", "404px");
    }
    else
    {
        $("cnt").css("min-height", "calc(100% - 62px)");
    }

}).load(function(){
    
    if($("cnt").height() < 404)
    {
        $("cnt").css("min-height", "404px");
    }
    else
    {
        $("cnt").css("min-height", "calc(100% - 62px)");
    }
    
});

JSFiddle

Answer 1

Generally speaking, it's better to have the "variable" one be height, and the "fixed" constraint be min- or max-height. In your case:

#cnt {
    height: calc(100% - 62px);
    min-height: 404px;
}

This will allow the height to vary based on the percentage, but will be constrained to the minimum 404 height.

Answer 2

If you don't mind using two divs, then perhaps you can do something like:

<div style="min-height:calc(100% - 62px);">
  <div style="min-height:404px;">
    content here
  </div>
</div>