CSS - posunutí zápatí stránky

[pat251]

Zdravím,

nevíte jak v CSS zapsat, aby se zápatí zobrazovalo vždy na konci obsahu stránky? Přičemž pokud bude obsahu málo tak na spodní části obrazovky? Například na stránce obchodní podmínky je zápatí uprostřed obrazovky, protože článek zatím neobsahuje text. Pro lepší pochopení screen..snad pomůže

Absolutní pozicování použít nelze, protože při scrollování zůstane na místě. Relativní ani sticky nepomáhá. Zkoušel jsem i přes flexbox, pozicování stylem "bottom: 0px" a kdeco... Hádám že to asi není raketová věda, ale prostě se mi nedaří...

 

Díky.

[Guest]

Verze Prestashopu ?

Jde o defaultní šablonu ?

[pat251]

Jo sorry, verze 1.7.6.1, šablona defaultní... classics

[Guest]

V pohodě.

Dám kávu a mrknu na to.

Standardně by měl footer být zakotvený úplně dole.

Kdyžtak mi napiš do PM odkaz na stránky.

[Guest]

No, asi byl přepsán styl, protože v defaultní šabloně je vše v pořádku.

./themes/classic/templates/_partials/footer.tpl

zobrazuje se newsletter v {hook h='displayFooterBefore'}, informace a odkazy v {hook h='displayFooter'} a {hook h='displayFooterAfter'} a nakonec copyright.

<div class="container">
  <div class="row">
    {block name='hook_footer_before'}
      {hook h='displayFooterBefore'}
    {/block}
  </div>
</div>
<div class="footer-container">
  <div class="container">
    <div class="row">
      {block name='hook_footer'}
        {hook h='displayFooter'}
      {/block}
    </div>
    <div class="row">
      {block name='hook_footer_after'}
        {hook h='displayFooterAfter'}
      {/block}
    </div>
    <div class="row">
      <div class="col-md-12">
        <p class="text-sm-center">
          {block name='copyright_link'}
            <a class="_blank" href="https://www.prestashop.com" target="_blank" rel="nofollow">
              {l s='%copyright% %year% - Ecommerce software by %prestashop%' sprintf=['%prestashop%' => 'PrestaShop™', '%year%' => 'Y'|date, '%copyright%' => '©'] d='Shop.Theme.Global'}
            </a>
          {/block}
        </p>
      </div>
    </div>
  </div>
</div>

CSS styly pro tyto háčky jsou:

#footer, .block_newsletter, .block-social, .footer-container

[Guest]

Díky za odkaz.

Chybu ti způsobuje chat modul Smartsupp.

Zakaž modul Smartsupp a uvidíš, jestli se vše opraví. 😁

Hlavně position: fixed a bottom:24px

Modul je zaháčkovaný hned pod body, což je špatně.

Měl by být zaháčkovaný až pod <main> .....

<div id="chat-application" style="background: transparent none repeat scroll 0% 0%; overflow: hidden; display: block; margin: 0px; padding: 0px; bottom: 24px; transition: none 0s ease 0s; z-index: 2147483647; position: fixed; width: 72px; height: 72px; right: 11px; max-height: 72px; max-width: 72px; box-sizing: border-box;"><iframe id="chat-application-iframe" title="Smartsupp" aria-hidden="true" style="background: transparent none repeat scroll 0% 0%; overflow: hidden; position: relative; width: 100%; height: 100%; margin: 0px; border: medium none; min-width: inherit; max-width: inherit; min-height: inherit; max-height: inherit; transition: none 0s ease 0s; z-index: 10000001;"></iframe></div>

 

Edited July 7, 2020 by Guest (see edit history)

[pat251]

Bohužel ani po vypnutí modulu nedošlo ke změně. Popravdě jsem Smartsupp instaloval teprve v pátek a to jsem se již tenhle problém snažil několik dní vyřešit.

Zkusil jsem nahradit celou složku themes za jinou - zkopírovanou z čistě nainstalované presty... žádná změna.

 

[pat251]

Aha, presta to neumí ani po instalaci.

 

 

[Guest]

Ty jo, mně to neudělá nikde 🙂

[pat251]

Myslíš na e-apps.eu? Stránky "váš účet" - pokud nejsi zalogovaný.

[Guest]

#footer{padding-top:2.5rem;position:fixed; bottom:0px; width:100%;}

😁

[pat251]

Díky, bohužel to řeší problém pouze částečně. Pokud je stránka dlouhá - například výpis zboží, tak to produkty překrývá....potřebuji aby byla vždy na konci stránky, přičemž pokud bude obsahu málo, tak na spodní hraně obrazovky.

[pat251]

Vyřešeno. Jen doplnit obalující div...

#cms #footer {
padding-top:2.5rem
position:fixed;
bottom:0px;
width:100%;
}

#authentication #footer {
padding-top:2.5rem
position:fixed;
bottom:0px;
width:100%;
}

Díky za pomoc Guest 😉 👍

Edited July 7, 2020 by pat251
chyba kopírování :) (see edit history)