Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 606
Liftoff Avatar asked Apr 09 '14 22:04

Liftoff


People also ask

How do you override min and height in CSS?

Use a more specific selector to override previous styles. To reset styles to the default, use auto|inherit|0 depending on the attribute. For min-height it's 0 . CSS3 introduces the special value inital which should be preferably used - but unfortunately it has limited IE support.

What does min height 100% do?

– What is Min Height 100vh in CSS? Min height 100vh means the element should occupy the web browser viewport height. This is always 100 percent of the web browser's viewport height. If there is more content, the element will stretch more than the viewport's height, which is a code example that will clear things up.

What is the difference between min height and height in CSS?

The difference between height and min-height is that height defines a value for the height and that's how tall the element will be. min-height says that the minimum height is some value but that the element can continue to grow past that defined height if needed (like the content inside makes it taller or whatever).

How do you reset min height in CSS?

Conversation. CSS tip: To reset a min-height or min-width declaration, set it to "0", not "auto". For max-height/width, the initial value is "none".


2 Answers

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.

like image 69
Niet the Dark Absol Avatar answered Oct 13 '22 05:10

Niet the Dark Absol


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>
like image 27
robocat Avatar answered Oct 13 '22 05:10

robocat