| Autor | Zpráva | ||
|---|---|---|---|
| quatzael Profil |
#1 · Zasláno: 4. 10. 2013, 10:43:13
Potřebuju stránku udělat tak, aby footer byl dole na stránce i v případě, že obsah nad ním nebude dostatečně velký, aby pokryl celou stránku.
V reálu mám nad sebou dva divy: <div id="block"></div> <div id="footer"></div> Ve většině případů je obsah prvního divu dostatečný, takže pokryje celou viditelnou oblast okna prohlížeče a k footeru dole se dorolluju myší. Ale v případě, že ten obsah nahoře je menší tak se hned za ním objeví ten footer a pod ním pak prázdný místo. Není na to nějaký jednoduchý řešení? Na googlu jsem našel nějaký návody pro sticky footer, ale bohužel ne co to vlastně ve skutečnosti je. Zdá se mi, že jde o fixovanej footer, který je zobrazen vždy dole a roluje se zbytek stránky. To já ale nechci.
|
||
| Plaváček Profil |
#2 · Zasláno: 4. 10. 2013, 10:47:55
Kouzelná fráze? Patička vždy dole.
|
||
| Petr Ká Profil |
#3 · Zasláno: 4. 10. 2013, 10:47:57
position: absolute; bottom:0; position:fixed; nastaví, že se obsah zobrazuje na souřadnicích ke vztahu viewportu bez ohledu na "seskrolovani" na strance, kdežto position:absolute; udělá přesně to, co hledáš. |
||
| quatzael Profil |
#4 · Zasláno: 4. 10. 2013, 10:56:48
Plaváček:
Ta Tvoje kouzelná fráze právě není sama o sobě tak jednoznačná a může evokovat ten sticky footer.. Ale už projíždím ten Tvůj návod Petr Ká: To position: absolute; mi akorát zajistilo, že se ten footer nezobrazil vůbec.
|
||
| Petr Ká Profil |
#5 · Zasláno: 4. 10. 2013, 10:59:52
máš nastaven i bottom:0; ??? skus ještě přidat z-index:999;
|
||
| quatzael Profil |
#6 · Zasláno: 4. 10. 2013, 11:03:59 · Upravil/a: quatzael
Tak se teď dočítám, že zřejmě ten sticky footer je asi to co hledám..
Petr Ká: Mám, ale prostě ta celá část, kde má být ten footer, tam není. z-index to nijak neovlivní.. |
||
| quatzael Profil |
#7 · Zasláno: 4. 10. 2013, 12:26:16 · Upravil/a: quatzael
Plaváček, Petr Ká:
Zkouším tohle řešení, ale narážím na problém, že se mi ten div #obsah nerozprostře do celýho #kontejneru.. I když mám u něj třeba height: 100%; Už mi to funguje!! Díky!! Měl jsem tam malou chybu.. |
||
|
Časová prodleva: 11 let
|
|||
0