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

Ответы

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

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

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