CSS два значения минимальной высоты, в зависимости от того, что больше

У меня есть окно, в котором я хочу заполнить весь экран, чтобы нижний колонтитул всегда находился вне экрана. Я выполнил это с минимальной высотой:

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

Однако есть некоторые случаи, когда это может быть слишком маленьким для боковой панели, которую я создал. Минимальная высота боковой панели составляет 404 пикселя. Как я могу использовать оба эти метода, чтобы он использовал большее значение? Можно ли это сделать со строгим 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

Ответ 1

Если вы не против использования двух div, то, возможно, вы можете сделать что-то вроде:

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

Ответ 2

Вообще говоря, лучше иметь "переменную" - height, а "фиксированное" ограничение - min- или max-height. В вашем случае:

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

Это позволит изменять высоту в зависимости от процента, но будет ограничена минимальной высотой 404.

Ответ 3

Это невозможно сделать только в CSS3. CSS предлагает функцию calc() для математики, но согласно Mozilla разрешена только базовая математика (+, -, *,/), Спецификация CSS3 ничего не говорит о том, чтобы установить одно и то же значение дважды, поэтому полностью зависит от реализации, что происходит с

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

В основном первое значение просто игнорируется (когда оба значения имеют один и тот же "уровень каскада". Для получения дополнительной информации смотрите здесь.