Как сделать, чтобы высота рассчитывалась по размеру окна браузера?

Question

[Влад Владов]

На сайте хочу сделать контент на всю высоту страницы, а под ним футер, но футер вылезает (см.
скрин серая полоса)

Попробовал сделать через JQuery

(function () {

    $(".full-height").height($(window).height());
    $(window).resize(function(){
        $(".full-height").height($(window).height());
    });
}
}());

На больших мониторах всё отлично, футер показывается только при скролле вниз, но на маленьких дисплеях футер налезает на текст. Как можно сделать так, чтобы скрипт работал только на экранах с высотой больше 900? Заранее спасибо

Answer 1

[profesor08]

<div class="content"></div>
<div class="footer"></div>

.content {
    height: 100vh;
}

.footer {
    height: 50px;
}

Где vh - Viewport Height

Comments

[Влад Владов]

Футер всё равно налезает на маленьких дисплеях таким образом, даже ещё больше, чем скриптом

[Сергей delphinpro]

Влад Владов:

.content {
  min-height: calc(100vh - 50px);
}
.footer {
  height: 50px;
}

[Сергей delphinpro]

Влад Владов: та же самая математика в варианте со скриптом.

[profesor08]

Влад Владов: не может быть https://jsfiddle.net/profesor08/rhtyyy5b/

[Влад Владов]

profesor08: Я могу в ЛС скинуть сайт, чтобы вы посмотрели, что так не работает