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.
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)");
}
});
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 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.
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).
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".
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With