Make Page Full Screen Height and Width with Footer at Bottom

[jeffsla8]

Hello,

I’d like to know how to make my page the full height of the viewport. Here’s what is happening:

Thank you!

[jade]

Hi there,

This would involve some custom code. What I can suggest is that you can write some Javascript code that will get the height of the screen and the height of the header and the footer area then set the content section’s height to the difference of the total of the header and footer height to the height of the entire window.

To get you started. the code should be something like:

var header = jQuery('.x-masthead').outerHeight();
var footer = jQuery('.x-colophon').outerHeight();
var win = jQuery(window).height();

jQuery('.fullheight').css('height', win - (header + footer) );

For the code above to work, add it to the Cornerstone page’s JS area then add a class to the section on the page then update this line:

jQuery('.fullheight').css('height', win - (header + footer) );

And change fullheight to the class name you added to the section.

Please note that since this is not available out of the box for the theme, it requires some customization which goes beyond the scope of our support. If you are not comfortable making further changes and if you require more customization on your site, it would be best to get in touch with a developer.

Hope this helps you get started.

[jeffsla8]

Hi Jade,

Thank you for your help!

[rad]

You’re most welcome!