Jump to content

Prestashop Classic Theme height fix? Please help.


Recommended Posts

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.

  • Thanks 1

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More