Jump to content

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


support

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

Link to post
Share on other sites
  • support changed the title to Как в шаблоне vamshop4 сделать footer внизу вне зависимости от высоты страницы?
×
×
  • Create New...