Make page the height of the browser window

[jeffprewitt]

Currently I am using the following js to make the content section of a number of pages fit the height of the screen minus the header and footer. However, this works when the screen is larger than the content (such as on my 25" desktop screen) but it doesn’t work when the content hight is larger than the screen (such as on tablets or mobile).

jQuery( document ).ready(function($) {
$(window).on(“resize”, function () {
var windowHeight = $( window ).height();
var mastheadHeight = $(’.masthead’).outerHeight();
var footerwHeight = $(’.x-colophon.top’).outerHeight();
var footerHeight = $(’.x-colophon.bottom’).outerHeight();
var contentHeight = windowHeight - (mastheadHeight + footerwHeight + footerHeight)
$(’.page-id-663 #x-section-1’).height(contentHeight);
$(’.page-id-75 #x-section-1’).height(contentHeight);
$(’.page-id-560 #x-section-1’).height(contentHeight);
$(’.page-id-757 #x-section-1’).height(contentHeight-105);
$(’.page-id-770 #x-section-1’).height(contentHeight-105);
$(’.page-id-774 #x-section-1’).height(contentHeight-105);
$(’.page-id-781 #x-section-1’).height(contentHeight-105);
$(’.page-id-783 #x-section-1’).height(contentHeight-105);
$(’.page-id-785 #x-section-1’).height(contentHeight-105);
$(’.page-id-832 #x-section-1’).height(contentHeight-105);
$(’.page-id-848 #x-section-1’).height(contentHeight-105);
$(’.page-id-855 #x-section-1’).height(contentHeight-105);
$(’.page-id-858 #x-section-1’).height(contentHeight-105);
$(’.page-id-861 #x-section-1’).height(contentHeight-105);
$(’.page-id-864 #x-section-1’).height(contentHeight-105);
$(’.page-id-1070 #x-section-1’).height(contentHeight-105);
$(’.page-id-1076 #x-section-1’).height(contentHeight-105);

}).resize();
});

Is there a way to tell this code to only resize the screen height if the content height is less than the screen height? Or just a way to tell it not to work on mobile and tablets?

[christopher]

Hi there,

This is a customization question and is outside of our support scope. We will be able to only suggest you workarounds but the implementation and maintenance of the code is on your shoulders.

Please kindly look up the vh value of the height property in CSS. That is a new value which I think will help you achieve the effect you want:

Fun with Viewport Units | CSS-Tricks

You may probably subtract the height of the header and footer to achieve the effect you like. So use the Developer toolbar of the Chrome browser to find out the height of the footer and header. Sum them up and subtract it from the 100vh. Something like this: (Let’s say the height of the footer and header combined is 250px)

.CONTAINERSELECTOR {
   height: calc(100vh - 250px);
   overflow: hidden;
}

Thank you.