CODEWITHSUNDEEP
javascriptcssheight
Liftoff
Liftoff

Reputation: 25372

CSS two min-height values, whichever's bigger

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

Upvotes: 15

Views: 9133

Answers (4)

Rich - enzedonline
Rich - enzedonline

Reputation: 1258

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);
}

Upvotes: 0

robocat
robocat

Reputation: 5413

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>

Upvotes: 9

Ennosigaeon
Ennosigaeon

Reputation: 442

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.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

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.

Upvotes: 10

Related Questions