Prestashop Classic Theme height fix? Please help.

[JohnSmithUK]

We've tried everything. How do we fix this? 

Example: https://www.mindrnd.com/login?back=my-account

Situation: On very large or long screens the body on Prestashop classic theme is not 100% height. See attached. 

How do we make wrapper of the body 100% height on all pages to remove the white space after the copyright. ?

[Luis C]

Hi, 

you can achieve this kind of behaviour in a number of different ways:

If you don't mind using jQuery, you can set the min-height of your wrapper container using the viewport height ($(window).height();) and substracting your header and footer outer / inner height.

Something like...

var minHeight = $(window).height() - $('#header').innerHeight() - $('#footer').innerHeight();
//console.log('substraction: '+minHeight);
//console.log('window: '+$(window).height());

$( document ).ready(function() {
	$('#wrapper').css('min-height', minHeight+'px');
});

 

You can also set a min-height for your wrapper on specific pages that you know will have a shorter height, liike the login page. You can do so by making some conditionals in your template files, like this:

      <section id="wrapper"{if $page.page_name == 'authentication' OR $page.page_name == 'contact' ...... } class="myclass"{/if}>

Then, in your custom.css file:

.myclass {
  min-height: calc(100vh - 430px); /* 430px is the aproximate combined height of your header and footer containers */
}

Note: In classic theme you can usually find your page name in your body ID.

 

Other ways involve changing a little bit your structure, but it WILL affect all your pages.

 

I hope it did help you.

[JohnSmithUK]

Is there anyway to apply this 

.myclass { min-height: calc(100vh - 430px); /* 430px is the aproximate combined height of your header and footer containers */ }

to all pages? If so, how without jQuery? 

Thank You Very Much!

[Luis C]

Just apply the case to the I'd instead. Don't use .my class but #wrapper