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

我有一个窗口，我想填满整个屏幕，以便页脚总是离开屏幕。我以最小高度完成了这个：

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

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

这不起作用：

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

它最终总是使用404px值。

编辑：

这是我的JS / jQuery解决方案。我发现的一个问题是我的浏览器 $(window).height() 正在返回一个比它应该大400px的值。此外，在调整大小时，它会在一个值（+ 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

8346

2018-04-09 22:43

起源

你能不能创造一个小提琴？ - ramesh

@ramesh是的，我会画一个 - David

你不能只使用 min-height: calc(max(404px, 100% - 62px));？ AFAIR，它得到了Firefox和Chrome的支持。 - raina77ow

据我所知，你只能在CSS3中进行简单的数学运算（加法，减法）。无法比较值。在Javascript中它绝对是可能的。如果你不想使用JS 也许减可以帮你。我不确定... - Ennosigaeon

@Ennosigaeon Well JS是一个选择;我只是想知道是否有纯CSS解决方案。 - David

答案:

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

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

2018-04-10 00:21

如果你添加 height: 100% 这两个元素都很漂亮！的jsfiddle - David

CSS4可能会引入一个min（）运算符而不是calc（）但是还没有浏览器支持： stackoverflow.com/questions/16617248/... - robocat

一般来说，最好有“变量” height，以及“固定”约束 min- 要么 max-height。在你的情况下：

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

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

2018-04-09 22:47

这会让它超越 calc(100% - 62px) 如有必要？ - David

啊，嗯......我不敢，抱歉。好点子。嗯... - Niet the Dark Absol

为什么不将高度设置为404px，将最小高度设置为cal（100％-62px）。这样它会工作，但我想如果cal值小于404px，那么它就不会工作。 - ramesh

@ramesh这将导致它尝试将高度设置为404，但然后受到最小高度的约束 - 它实际上是相同的结果。 - Niet the Dark Absol

仅在CSS3中无法执行此操作。 CSS提供 calc() 数学的功能，但根据 Mozilla的只允许基本数学（+， - ，*，/）。 CSS3规范没有说明两次设置相同的值，所以它完全取决于实现的情况

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

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

2018-04-09 23:02

CSS规范明确指出 last declaration in document order wins。资源： w3.org/TR/2013/CR-css-cascade-3-20131003/#cascading - 在实践中，你的例子是相同的 div { height: 20px; } - Mikko Rantalainen

该最后宣言获胜包含在CSS解析中以允许向前兼容的解析。这个想法是允许作者首先设置公共基线样式，然后为较新的用户代理添加新的覆盖。例如 .special {display: inline; display: inline-block; } 将被解释为 display: inline 由不了解该值的所有用户代理 inline-block （例如价值 inline-block CSS中不存在1）。 - Mikko Rantalainen

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

编辑：

的jsfiddle

答案:

热门问题