IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Jiří Gabriel:22.5.2017 11:02

Čus, dělám web a mám šílenej problém s footrem už nevím jak to mám udělat, zkoušel jsem kde co (fóra, ruzné weby atd.) :D Problém je následující, chci aby se ten footer držel dole na stránce, ale ne aby šel pořád vidět, jen když někdo srolluje úplně dólů na stránku. Odkaz na testovací web je tady: Stránka Jestli mi někdo umíte poradit nebo napsat kód jak by to šlo byl bych rád ..

Editováno 22.5.2017 11:02
 
Odpovědět
22.5.2017 11:02
Avatar
Pavel Mareš
Tvůrce
Avatar
Pavel Mareš:22.5.2017 11:18

Tohle jsem řešil, postup je následující:

  1. zjisti si výšku stránku nad patičkou, zjisti výšku patičky a zjisti velikost dokumentu
  2. odečti od výšky dokumentu výšku elementu nad patičkou (plus margin / padding jestli tam je)
  3. a zjisti, zda výsledná hodnota je větší, než patička
  4. pokud ano, tak patičku dej absolute (fixed) bottom 0px
  5. pokud je to rovno nebo menší, dej patičku jako relative
Editováno 22.5.2017 11:18
Nahoru Odpovědět
22.5.2017 11:18
Však ono půjde ...
Avatar
Odpovídá na Pavel Mareš
Jiří Gabriel:22.5.2017 11:29

Bohužel když tohle zkusím tak se mi to rozsype a překrývá to baner, který se nachází nad footerem. Nbeo se s tím nic nestane. Tenhle probém hlavně řším na odkazu na reference, jelikož tam není žádný text a footer se i tak hodil do prostředku stránk a zůstal tam ..

 
Nahoru Odpovědět
22.5.2017 11:29
Avatar
Odpovídá na Jiří Gabriel
Patrik Valkovič:22.5.2017 11:34

A použít něco jako minHeight: 100vh?

Nahoru Odpovědět
22.5.2017 11:34
Nikdy neumíme dost na to, abychom se nemohli něco nového naučit.
Avatar
Petr Čech
Tvůrce
Avatar
Petr Čech:22.5.2017 11:36

https://philipwalton.github.io/…icky-footer/

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
22.5.2017 11:36
the cake is a lie
Avatar
Odpovídá na Patrik Valkovič
Jiří Gabriel:22.5.2017 11:39

100vh nepomůže zkoušel jsem ..

 
Nahoru Odpovědět
22.5.2017 11:39
Avatar
Odpovídá na Petr Čech
Jiří Gabriel:22.5.2017 11:44

Díky Petře :)

 
Nahoru Odpovědět
22.5.2017 11:44
Avatar
Petr Čech
Tvůrce
Avatar
Nahoru Odpovědět
22.5.2017 11:58
the cake is a lie
Avatar
Odpovídá na Jiří Gabriel
Patrik Valkovič:22.5.2017 12:00

Ale jo, jen samozřejmě ten content nesmí mít přesně těch 100vh ale o něco míň, aby se tam vešel footer.

Nahoru Odpovědět
22.5.2017 12:00
Nikdy neumíme dost na to, abychom se nemohli něco nového naučit.
Avatar
Pavel Mareš
Tvůrce
Avatar
Odpovídá na Petr Čech
Pavel Mareš:22.5.2017 12:47

Prosím, vysvětli mi, proč je můj postup, který mi funguje na mém webu (aplikaci), špatný a dal si mínus. Rád bych od takové kapacity slyšel odpověď. Díky.

Editováno 22.5.2017 12:48
Nahoru Odpovědět
22.5.2017 12:47
Však ono půjde ...
Avatar
David Hynek
Tvůrce
Avatar
Odpovídá na Pavel Mareš
David Hynek:22.5.2017 14:29

Možná se nelíbí použití javascriptu, když to jde i jen přes styly...

Nahoru Odpovědět
22.5.2017 14:29
Čím víc vím, tím víc věcí nevím.
Avatar
Petr Čech
Tvůrce
Avatar
Odpovídá na Pavel Mareš
Petr Čech:22.5.2017 18:47

Nemá smysl tahat do toho JS, pokud to jde snadno přes styly.
To nemění nic na tom, že to bude fungovat a dá se to použít třeba jako failover pro případ, že by nefungovalo flex nebo tak něco.

Editováno 22.5.2017 18:50
Nahoru Odpovědět
22.5.2017 18:47
the cake is a lie
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 12 zpráv z 12.