Sign in to follow this  
support

Как в шаблоне vamshop4 сделать footer внизу вне зависимости от высоты страницы?

Recommended Posts

support

В /templates/vamshop4/index.html меняйте:

<div id="contentWrapper">

    {if $smarty.const.DEFAULT_NAVIGATION == "slide_menu"}
    {include file="{$smarty.const.DIR_FS_CATALOG}{$tpl_path}components/navbar/navbar_slide_menu.html"}
    {elseif $smarty.const.DEFAULT_NAVIGATION == "fullscreen_menu"}
    {include file="{$smarty.const.DIR_FS_CATALOG}{$tpl_path}components/header/header.html"}
    {include file="{$smarty.const.DIR_FS_CATALOG}{$tpl_path}components/navbar/navbar.html"}
    {/if}    



<div class="container">

на:

<div id="contentWrapper" class="d-flex flex-column sticky-footer-wrapper">

    {if $smarty.const.DEFAULT_NAVIGATION == "slide_menu"}
    {include file="{$smarty.const.DIR_FS_CATALOG}{$tpl_path}components/navbar/navbar_slide_menu.html"}
    {elseif $smarty.const.DEFAULT_NAVIGATION == "fullscreen_menu"}
    {include file="{$smarty.const.DIR_FS_CATALOG}{$tpl_path}components/header/header.html"}
    {include file="{$smarty.const.DIR_FS_CATALOG}{$tpl_path}components/navbar/navbar.html"}
    {/if}    



<div class="container flex-fill">

в /templates/vamshop4/components/footer/footer.html меняйте:

<footer class="p-3 bg-secondary">

на:

<footer class="flex-fill p-3 bg-secondary">

в /templates/vamshop4/css/vamshop4.css добавляйте:

body, .sticky-footer-wrapper {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}

 

Тогда footer будет прилеплен к нижней части.

Смотрите скриншот, как по умолчанию:

Screenshot from 2019-07-05 19-46-32.png

и как после данных правок:

Screenshot from 2019-07-05 19-45-56.png

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
Sign in to follow this