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

Adagio

can you please create a fiddle? – Folio

@Folio Yeah I'll draw one up – Adagio

Can't you just use min-height: calc(max(404px, 100% - 62px));? AFAIR, it was supported by Firefox and Chrome. – Photoactive

As far as I know you are only able to simple math (addition, subtraction) in CSS3. It is not possible to compare values. In Javascript it is definitely possible. If you don't want to use JS maybe Less can help you. I am not sure... – Tackett

@Tackett Well JS is an option; I was just wondering if there was a pure CSS solution. – Adagio

Answer 1

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>

Gatling

If you add height: 100% to both elements, this works beautifully! JSFiddle – Adagio

CSS4 might introduce a min() operator to use instead of calc() but no browser supports that yet: #16617748 – Gatling

Answer 2

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.

Brianbriana

Will this allow it to grow beyond calc(100% - 62px) if necessary? – Adagio

Why dont you set the height to 404px and min-height to cal(100%-62px). That way it will work but I suppose if the cal value is less that 404px, then it wont work. – Folio

@Folio That would cause it to try and set the height to 404, but then be constrained by the min-height - it's effectively the same result. – Brianbriana

Answer 3

It is not possible to do this only in CSS3. CSS offers the calc() function for math, but according to Mozilla only the basic math is allowed (+, -, *, /). The CSS3 specification says nothing about setting the same value twice, so it depends completely on the implementation what happens with

div {
   height: 10px;
   height: 20px;
}

Mostly the first value is simply ignored (when both values have the same "cascade level". For more information look here.

Tackett

CSS specification clearly says that last declaration in document order wins. Source: w3.org/TR/2013/CR-css-cascade-3-20131003/#cascading - in practice, your example is same as div { height: 20px; } – Selfimprovement

The last declaration wins is included in the CSS parsing to allow forward compatible parsing. The idea is to allow authors to first set the common baseline style and then add new overrides for newer user agents. For example .special {display: inline; display: inline-block; } would be interpreted as display: inline by all user agents that do not understand the value inline-block (e.g. the value inline-block did not exists in CSS 1). – Selfimprovement

Answer 4

Old question, but since it's #1 result on google for this question, the current answer is in min/max() https://developer.mozilla.org/en-US/docs/Web/CSS/min

So for a modal that I wanted to be 90% of the viewport up to a maximum of 1400px, I ended up with:

.modal-dialog {
    max-width: min(90vw, 1400px);
}

Cairistiona