How to make the height calculated according to the size of the browser window?

Question

css

On the site I want to make content for the entire height of the page, and below it is a footer, but the footer crawls out (see
the gray bar screen)

I tried to do it through JQuery

(function () {

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

On large monitors, everything is fine, the footer is shown only when scrolling down, but on small displays, the footer fits over the text. How can I make the script work only on screens with a height greater than 900? Thanks in advance

Answer 1

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

.content {
    height: 100vh;
}

.footer {
    height: 50px;
}

Where vh - Viewport Height