CSS两个最小高度值,以较大者为准

Question

我有一个窗口,我想填满整个屏幕,以便页脚始终离开屏幕.我用最小高度完成了这个:

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

但是,在某些情况下,对于我创建的侧边栏来说,这可能太小了.侧边栏的最小高度为404px.如何使用这两者以便它使用更大的值？这可以用严格的CSS完成还是我需要JS？

这不起作用:

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

它最终总是使用404px值.

编辑:

这是我的JS/jQuery解决方案.我发现的一个问题是我的浏览器$(window).height()返回的值比它应该的值大400像素.此外,在调整大小时,它会在一个值(+ 377px)和另一个值(+ 787px)之间来回跳转,其中+表示它比实际值大得多.为了解决这个问题,我使用了<cnt>元素本身的高度,但这有相同的跳跃来回大小问题.

$(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

如果你不介意使用两个div,那么也许你可以这样做:

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

Answer 2

一般来说,最好让"变量"为"变量" height,"固定"约束为min-或max-height.在你的情况下:

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

这将允许高度根据百分比而变化,但将被限制在最小404高度.