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

一般来说，拥有＆＃34;变量＆＃34;会更好。一个是height，＆＃34;固定＆＃34;约束为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;
}

大多数情况下，第一个值被忽略（当两个值具有相同的＆＃34;级联级别＆＃34;。有关更多信息，请查看here。

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

编辑：

JSFiddle

3 个答案: