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

一般来说，“可变”约束最好是

height

，而“固定”约束是

min-

或

max-height

。在你的情况下：

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

这将允许高度根据百分比变化，但将被限制为最小 404 高度。

Answer 2

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

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

Answer 3

仅在 CSS3 中无法做到这一点。 CSS 为数学提供了

calc()

函数，但根据 Mozilla 的说法，只允许使用基本数学（+、-、*、/）。 CSS3 规范没有提到两次设置相同的值，所以它完全取决于实现情况

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

大多数情况下，第一个值被简单地忽略（当两个值具有相同的“级联级别”时）。有关更多信息，请查看here.

Answer 4

老问题，但是因为这个问题在谷歌上排名第一，所以当前的答案是 min/max() https://developer.mozilla.org/zh-CN/docs/Web/CSS/min

所以对于一个模态，我想成为视口的 90%，最大为 1400px，我最终得到：

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