Jak správně zatlačit plovoucí zápatí na konec stránky. Nové tagy Zápatí html design

Každý, kdo je zvyklý na plnohodnotné webové stránky, preferuje vzhled „přibitého“ (přilepeného, lepivého) ke spodní části zápatí stránky. Ale na internetu jsou dva problémy: vstupní pole, která nerostou směrem dolů, a zápatí, která nejsou přibitá (ke spodní části okna). Když například otevřeme krátké stránky jako habrahabr.ru/settings/social, okamžitě upoutá pozornost, že informace, která má být ve spodní části zobrazované oblasti, se drží obsahu a je někde uprostřed nebo dokonce nahoře. okna, když je dno prázdné.

Takže místo .
Tento manuál pro začátečníky ukáže, jak za 45 minut vyrobit „přibitou“ patičku, napravit nedostatky i tak respektované publikace, jako je Habr, a konkurovat jí jako realizaci vašeho slibného projektu.

Podívejme se na implementaci jednoho typu přibitého zápatí, převzatého ze sítě, a pokusme se pochopit, co se děje. css-tricks.com/snippets/css/sticky-footer
CSS:
* ( margin:0; padding:0; ) html, body, #wrap ( height: 100%; ) body > #wrap (height: auto; min-height: 100%;) #main ( padding-bottom: 150px; ) /* musí mít stejnou výšku jako zápatí */ #footer ( pozice: relativní; okraj-nahoře: -150px; /* záporná hodnota výšky zápatí */ výška: 150px; clear:both;) /* VYMAZAT OPRAVU*/ .clearfix:after (obsah: "."; display: block; height: 0; clear: both; viditelnost: skrytý;) .clearfix (display: inline-block;) /* Skryje se z IE-mac \*/ * html .clearfix( výška: 1%;) .clearfix(display: block;) /* Ukončení skrytí z IE-mac */
HTML:

Je nepravděpodobné, že všichni, dokonce i ti, kteří znají CSS, při pohledu na tento kód pochopí principy a budou sebevědomě upravovat složitý projekt. Jakýkoli krok stranou povede k vedlejším účinkům. Účelem zdůvodnění a vytvoření zápatí níže je poskytnout vám lepší pochopení pravidel CSS.

Začněme teorií

Obvyklá implementace přibitého zápatí se opírá o jedinečnou vlastnost CSS2, že prvky jsou bezprostřední potomky. TĚLO- podpora procentuální výšky ( výška: 100% nebo jiný) vzhledem k oknu, pokud mají všichni jejich rodiče stejnou procentuální výšku, počínaje značkou HTML. Dříve bez doctypes, ale nyní v Quirks Mode, jsou procentuální výšky prvků podporovány na jakékoli úrovni a v moderních doctypes - pouze uvnitř prvků v procentech. Pokud tedy vytvoříme blok obsahu (říkejme tomu #rozvržení) má 100% výšku, bude se posouvat, jako by to bylo okno. Je v něm umístěn veškerý (streamovaný) obsah, kromě patičky a možná i záhlaví.

Zápatí je umístěno za tento blok a má výšku 0px. Obecně můžete sledovat #rozvržení vložte tolik bloků, kolik chcete, ale všechny musí být buď vysoké 0 pixelů, nebo musí být mimo tok dokumentu (ne poloha: statická). A je tu ještě jeden důležitý trik, který se obvykle používá. Není nutné, aby se výška rovnala 0. Výšku můžete nastavit pevnou, ale odečíst ji od hlavního bloku kvůli vlastnosti okraj-dole: -(výška);.

Lidsky řečeno, styly udělají dole prázdnou „kapsu“, do které se vloží zápatí, a vždy se ukáže, že je buď přilepené ke spodnímu okraji okna, nebo ke spodnímu okraji dokumentu, pokud dokument je vyšší než výška okna. Na internetu a na Habré existuje mnoho implementací zápatí, s různým úspěchem ve všech prohlížečích. Pokračujme v jeho stavbě vlastními silami s využitím Habrova layoutu jako „tažného koně“.

Od spodní části bloku #rozvržení- toto je kapsa, musí být prázdná pro zápatí, nezobrazující objekty stránky. A zde se setkáváme s dalším omezením – nemůžeme dělat prázdnou kapsu na úkor vycpávka PROTI #rozvržení, protože pak to bude více než 100 %. nezachrání okraj- prázdnota musí být provedena kvůli vlastnostem vnořených prvků. Navíc je nutné zajistit, aby plovoucí prvky nevylézaly pod hranici bloku, což dělá například blok

, Kde .clear(clear:obě). Je důležité, aby buď toto" výška" byla pevná, nebo ve stejných relativních jednotkách, nebo bychom ji vypočítali při změně stránky. Obvykle je vhodné toto zarovnávací pole zarovnat s nastavením na požadovanou výšku.

Podívejme se na strukturu stránek našeho experimentálu. Nejjednodušší způsob, jak to udělat, je otevřít v prohlížeči Chrome okno Firebug nebo podobné okno („Nástroje pro vývojáře“ (Ctrl-F12)).

...horní reklamní blok...

Přejděme k pracovnímu příkladu

Co vidíme dispoziční vady z hlediska implementace efektu nailed footer? To vidíme
1) Zápatí na webu je uvnitř bloku s id=layout, který nemá procentuální výšku. Teoreticky by to, rodiče a blok obsahu .content-left měly být nastaveny na 100% výšku. S tím druhým nastávají problémy - není k tomu přizpůsoben. Chybí tedy jeden blok mezivrstvy nebo je zápatí na nesprávné úrovni. Kromě,
2) výška zápatí je variabilní (závisí na počtu prvků v seznamu a na velikosti písma, to je vidět nikoli z HTML, ale z CSS). A
3) výše #rozvržení existuje reklamní blok s pevnou výškou 90px;
4) v zápatí ani (obecně řečeno) v bloku nejsou žádné zarovnávací bloky #rozvržení(Ano, ale nad blokem .rotated_posts; snad by však mělo být připsáno zápatí).

Bod 4 - musíte kreslit pomocí scénáře.
Zdálo by se, že by bylo snadné přijít na třetí bod přidáním #layout(margin-top:-90px;) Ale pamatujte, že tento blok nemusí existovat – je potlačený ořezávačem bannerů, nebo se inzerenti najednou rozhodnou, že nebudou Ukaž to. Na webu je řada stránek, kde tomu tak není. Proto závislost margin-top z reklamního bloku je špatný nápad. Mnohem lepší - umístěte to dovnitř #rozvržení Pak nebude překážet.

Prvním bodem je, že aby přibité zápatí vůbec fungovalo, je potřeba umístit zápatí pod #rozvržení. S pomocí javascriptu však můžete implementovat další schémata nailed footer, ale v každém případě potřebujete JS nebo původně správný layout, abyste se bez něj obešli.

Protože nemůžeme být silnější než nejnovější designér rozvržení webu, který „připlácl“ zápatí do obsahu, odložíme myšlenku správného umístění zápatí na náš budoucí web (který tedy bude „chladnější“ než Habr!), a rozebereme Habra pomocí javascriptu (userscript) do správných stavů. (Řekněme si hned, na vině není projektant dispozičního řešení, ani výhybkář, ale typ lokality samozřejmě určuje strategické rozhodnutí projektového managementu.) Takto nedosáhneme ideálu, protože v první sekundě nebo dvou během procesu načítání bude stránka se špatným rozložením. Důležitý je pro nás ale koncept a schopnost překonat nejpopulárnější web ve světě IT lidí.

Proto na správné místo ve skriptu (dříve, na konci načítání stránky) zapíšeme přesuny DOM bloků reklamy a patičky na správná místa. (Připravme se na to, že kvůli uživatelským skriptům bude řešení složitější než čisté.)
var dQ = function(q)(return document.querySelector(q);) //pro zkrácení var topL = dQ("#horní řádek"), lay = dQ("#layout"), noha = dQ("#footer" ); if(topL && lay) //banner - uvnitř bloku obsahu lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //přesune zápatí lay.parentNode.insertBefore(footer, lay.nextSibling);
Bloky umístíme na svá místa – nyní zbývá přiřadit prvkům potřebné vlastnosti. Výška zápatí bude muset být nastavena přesně, jednoduše proto, že ji známe již v době, kdy se uživatelský skript projeví (konec načítání stránky). Kvůli spouštěcímu bodu uživatelského skriptu, jak je uvedeno výše, je skok zobrazení zápatí na stránce nevyhnutelný. Můžete zkusit udělat „dobrou tvář“, ale se „špatnou hrou“? Proč? „Špatná hra“ webu vám umožňuje vytvořit koncept bez super úsilí, což bude stačit k posouzení kvality a nebude potřeba, pokud budete na svém projektu „hrát správně“.
if(foot)( //zarovnání bloku

v zápatí h.apnd_el((clss:"vymazat", appendTo: patička)); var footH = foot.offsetHeight; //...a změřte výšku zápatí ) if(topL && položit && zápatí && položit.nextSibling)( //zarovnat blok požadované výšky v obsahu ("layout") h.apnd_el((clss:" clear", css:( height: (footH ||0) +"px"), appendTo: lay)); lay.style.minHeight ="100%"; h.addRules("#layout(margin-bottom:- "+ footH +"px !important)html, tělo (výška:100%)"); )
Zde jsme si dovolili aplikovat vlastnoručně psanou funkci h.apnd_el, který dělá zhruba to samé jako v jQuery -
$("

").css((výška: stopaH ||0)).appendTo($(zápatí))
A pak – další typická funkce vkládání pravidel CSS – h.addRules. Zde se bez něj neobejdete, protože je potřeba deklarovat pravidlo pomocí " !Důležité" - právě kvůli zvláštnostem priorit stylu z uživatelského skriptu.

S těmito kousky kódu můžeme vidět přibité zápatí v uživatelském skriptu (po skoku dolů) a plně porozumět tomu, jak vytvořit rozložení stránky. Je otravné používat každý den skákací design, takže se to doporučuje dělat čistě pro demonstrační a testovací účely. V uživatelském skriptu HabrAjax jsem nainstaloval podobný skript a zavřel jej pomocí nastavení „underFooter“ (nastavte „zaškrtnutí“ v seznamu nastavení před „patička přibitá ke dnu“), počínaje verzí 0.883_2012-09- 12.

Ovlivňuje přibité zápatí potřebu aktualizovat styly ZenComment, pokud jsou nastaveny? Ano. Kvůli složitému řetězci priorit stylů, ve kterém mají styly vložené uživatelským skriptem nejnižší prioritu, jsme museli uživatelské styly mírně upravit pro možnosti práce s přibitou patou. Pokud neaktualizujete uživatelské styly (na 2.66_2012-09-12+) - zápatí nebude fungovat přesně.

Blok otočený_příspěvek (tři oblíbené příspěvky z minulosti) vypadá logičtěji se zápatím, takže ve skutečném skriptu se také přesune do zápatí.

Druhá položka (ze seznamu nedostatků rozložení) je zdůvodnění čistě pro Habr (nevztahují se na uživatelský skript a částečně opakují předchozí).

Stránky mají problém, který jim brání ve vytvoření přibitého zápatí v čistém CSS – nedefinovaná výška zápatí v závislosti na výchozí velikosti písma v prohlížeči. Chcete-li implementovat zápatí v CSS, musíte zvolit relativní výšky písem, ale nemusí fungovat, pokud počítač uživatele nemá poskytnutá písma. Řešení proto musí obsahovat javascript, který umí upravit přibližnou polohu patičky do přesné polohy s přechody. Nebo poté, co se podíváte na přijatelnost řešení vytvořeného na uživatelském skriptu na různých platformách, proveďte vypočítanou instalaci přibitého zápatí - první pozorování ukazují, že řešení je praktické.

Závěr: Dispozice na Habré můžete plně uspořádat, ale k tomu potřebujete designéra rozložení, který jasně rozumí chování rozložení a uspořádá bloky ve správném pořadí. (Nyní tam zápatí a horní banner „nejsou“ a ne tak, že by mohly jednoduše získat přibité zápatí se styly.) Bez JS se obejdete, pokud nastavíte výšku zápatí v relativních jednotkách, s určitým okrajem prostor pro neurčitost písma.

Implementace

Pokud povolíte HabrAjax 0.883+, uvidíme práci „přibité zápatí“. Výškově se přizpůsobí pomocí skriptů. Umožňuje vám vyhodnotit, o kolik lépe vypadají stránky s přibitým zápatím ve srovnání s běžnými. Uživatelské styly ZenComment jsou kompatibilní se skripty, ale aby s nimi správně fungovalo přibité zápatí, musíte si nainstalovat ZenComment verze 2.66_2012-09-12 +.

Fakta o chování při implementaci

Šamanismus se zápatím, styly a skripty je šamanismus (podporovaný pouze teorií). V různých prohlížečích mírně odlišné chování, ale na některých místech - nečekané. Bez uživatelských skriptů a přeskupování bloků budou výsledky jiné. To daly experimenty s implementací na uživatelském skriptu.

1) Firefox - nečekaný nedostatek skoků v zápatí. Je zvláštní, že tam nejsou - k vykreslení dochází po umístění zápatí dole.

2) Chrome - překvapil "toulavým svitkem" - na stránku se přidávají prázdná místa s periodou jednou za vteřinu dole - něco se děje s výpočtem výšek. Je ošetřeno přidáním html,body(výška:100%) do uživatelského stylu, ale bez záruk, že to bude vždy fungovat. Je spolehlivější zkontrolovat, zda dokument nepřesahuje výšku okna, a pokud ne, posuňte zápatí, jinak - nic. Se skákáním - všechno je v pořádku, to je.

3) Opera - žádné skoky (v. 12.02) při prvním načtení stránky, ale rychlé opětovné načtení může zobrazit skok v zápatí. Jinak vede neméně správně než Fx.

No, musíte Chrome konkrétně naučit chovat se správně (skriptem) a uvést verzi ke kontrole v této podobě. Sekce v uživatelském skriptu je proto o něco složitější než ta, která je uvedena v článku.

Je třeba připomenout, že se nejedná o úplnou implementaci – nezohledňuje například případy změny velikosti okna uživatelem. Můžete také najít vzácné (v praxi) kombinace změny výšek zápatí před a po přesunu, kde logika začne selhávat, aniž by to způsobilo nepříjemnosti. Nedostatky jsou ponechány záměrně, protože je zachována rovnováha složitosti revize a dočasného řešení.

Ve výsledku se ukázalo, že jde o zcela funkční schéma práce, alespoň pro rychlé stolní počítače. Pokud je zjištěno nesprávné chování zápatí, mělo by být deaktivováno nastavení „underFooter“.

Pro jaké stránky je to užitečné?

Na standardním webu bez uživatelských stylů jsou i krátké stránky otázek a odpovědí delší než 1500 pixelů, což je u horizontálních monitorů ve většině případů nepostřehnutelné. Ale i u běžných monitorů často narazí na osobní stránky uživatelů s výškou okolo 1300 pixelů, kde se nepřibitá patička objeví v celé své kráse. Nepříliš dlouhá a řada stránek v uživatelském nastavení.

Když jsou použity uživatelské styly ZenComment, výrazně snižují požadovanou výšku stránky a uživatelský skript HabrAjax nemusí zobrazovat některé nebo všechny postranní panely v postranním panelu. U skriptů a stylů je proto mnohem častěji pozorován efekt nepřibité patičky. Proto je logické, že se oprava zápatí objevila poprvé v HabrAjaxu. Ale i běžný web má řadu stránek, kde by se hodila přibitá patička.

Bude podpora?

Chování webu za poslední rok ukazuje, že vývojáři (a potažmo management) začali implementovat funkce, které dříve existovaly pouze v uživatelských skriptech a uživatelských stylech. Například na začátku roku jsem psal, kde jsem nasbíral mnoho malých přání. O šest měsíců později jsem se k tomu vrátil a s uspokojením konstatoval (přímo v textu; můžete si přečíst „UPD“ a data), že řada funkcí popsaných jako přání již byla na webu implementována.

Dále se podíváme na „šipky“ místo čtverečků pro hodnocení komentářů. Objevily se v uživatelských silách almalexa ("Prettifier") asi před 3 lety a byly přijaty do ZenComment asi před 2 lety. Asi před 2-3 měsíci se objevily na stránkách. Začne věřit, že po chvíli se šipky roztáhnou do určité vzdálenosti, jak se to dělá v ZenCommentu (jedna šipka vlevo od čísla, druhá vpravo), aby míjelo méně.

Proto možná „přibitá patka“ na Habrého není taková fantazie, jak se mohlo před 3 lety zdát.

Další funkce ve skriptu HabrAjax, které se objevily za poslední 3 měsíce (vypnuto v nastavení):
* automatický růst vstupních polí (v Opeře se může zpomalit u velkých textů);
* dny v týdnu pro jiná data než „dnes“ a „včera“;
* události ve zdroji, sbalené na 1 řádek a 2 znaky;
* zkratka slov „habr*“ na „χ·“ a „χα“;
* nápověda k datům podle čísel článků - uvádí se, jaký měsíc a rok byl článek před načtením, podle čísla v URL;
* „Související příspěvky“ se sbalily na 2 slova. Snímek obrazovky vyskakovacího okna „související příspěvky“ (zobrazuje 12 odkazů, nikoli 4).

Pokud jsou boty konečnou součástí jakéhokoli oblečení, pak je zápatí webu elektronického obchodu posledním prvkem jeho prodejního designu. Zaměřením na nejspodnější prvek zápatí jsou moderní webové stránky připraveny předvést svou individualitu ve všech směrech. V konkurenčním prostředí e-commerce je dostatek originálních nápadů, kreativity a designových trendů. Před diverzifikací zápatí e-komerčního webu stojí za zvážení důležitých bodů. Co umístit jako první a jak to nejlépe udělat? Podívejte se na naši inspirativní recenzi návrhů zápatí, kde najdete zajímavé možnosti.

Přečtěte si také: 13 Marketingové trendy elektronického obchodu roku 2019

Kuriózní statistika společnosti Chartbeat. Studie chování 25 milionů uživatelů ukázala, jak hluboko stránky procházejí. Ukázalo se, že pozornost uživatele přitahuje prostor pod linií ohybu. Návštěvníci získávají prakticky užitečné informace nejdéle v oblasti 1200px od horní části stránky (s průměrem 700px vertikálně na obrazovce v prohlížeči) nebo za druhou obrazovkou.

Doba zobrazení (s) / Vzdálenost od horní části stránky (v pixelech)

Velká mezera v délce sledování první a druhé obrazovky. Samotný TOP je 4 sekundy, trvání dosahuje maxima (16 sekund) při 1200 pixelech shora a s dalším rolováním pomalu klesá.

Podíl návštěvníků (%) / Vzdálenost od horní části stránky (v pixelech)

Značná část návštěvníků (více než 25 %) ani nečeká, až se obsah načte a začne stránku rolovat. To znamená, že pouze 75 % uvidí jako první úplně nahoře. Nejzobrazovanější oblast stránky je 550 pixelů (těsně nad čárou přeložení).

Studie boří mýtus, že uživatelé neskrolují na konec stránky a nesledují veškerý obsah. Zápatí je také důležité pro moderní web eCommerce a má dokonce své výhody.

Nápady jak navrhnout "suterén" (patička), příklady prodejních návrhů

Těchto 10 tipů vám ukáže, jak krásně navrhnout zápatí webu – podle pravidel kompozice ve webdesignu a s vyřešením prioritních úkolů. Aplikujte nejvhodnější taktiky ke zlepšení použitelnosti, UX (uživatelské zkušenosti) a dokonce ke zvýšení prodeje.

1. Požadované informace

Tradičně jsou požadované organizační a právní záležitosti pokryty v patičce webu. Oznámení jsou stylizována do méně viditelného textu, což uvolňuje další oblasti stránky pro smysluplnější prvky. Zde je ukázkový seznam ke zvážení:

Poznámky k autorským právům
Právní vyloučení odpovědnosti
Fakturační údaje
Upozornění na soubory cookie

Webová stránka, která zboží prodává, musí splňovat zákonné požadavky a poskytovat informace o postupu, podmínkách vrácení. Jeho umístění v zápatí je výhodné jak pro prodejce, tak pro návštěvníky.

Příklad zápatí: Yves Rocher

Internetový obchod Yves Rocher: zápatí na celou obrazovku s pěkným designem střídajících se vrstev. Informuje o společnosti, infrastruktuře prodejního webu - od sledování objednávek až po politiku osobních údajů. Zde jsou tipy na používání produktu, bonusy, akce

Příklad zápatí: Lumity

Obchodníkům s potravinářskými přídatnými látkami je přidělena zvýšená právní úprava odpovědnost. Existuje poměrně málo věcí, které by na svých prodejních stránkách měli/neměli říkat. Odkazy na právní informace jsou pro lepší viditelnost vyznačeny tučně.

Zápatí s krásným obrázkem na pozadí velmi organicky zapadá do celkového designu webu. Neexistuje žádná jasná hranice, spíše samotný obsah slouží jako oddělovač

Příklad zápatí: Saddleback Leather Co

Prodejní web s krásným retro designem záhlaví a zápatí. 100 let záruka na vady materiálu a povrchové úpravy. Podmínky vrácení doprovázejí zajímavé příběhy… ne všechno je tak smutné s nezbytnými informacemi o e-commerce, jak se ukazuje

2. Negativní prostor - dostatečná vizuální vzdálenost

Při omezování počtu odkazů v zápatí nebuďte lakomí na negativní prostor – to bude mít úžasný vliv na vizuální vnímání a zlepší čitelnost. Obecně platí, že při udržování vizuální hierarchie jsou centrální prvky zaznamenány rychleji (lze s výhodou využít!).

Příklad zápatí: QUAY AUSTRALIA

Díky minimalistickému stylu a pevné rozbalovací nabídce si internetový obchod může dovolit prostornou zápatí.

příklad zápatí: Incase

Velké množství mikronegativního prostoru (mezi malými prvky) lze říci takto: pokud jsou přítomny všechny potřebné informace, jsou čitelné a rychle vnímatelné - vše je v pořádku

Příklad zápatí: Stumptown Coffee Roasters

Prostorné zápatí kavárny je skvělým doplňkem čisté designové kompozice, která má spoustu makronegativního prostoru („vzduch“ mezi sekcemi/sekcemi)

3. Poslední výzva k akci

Přečtěte si také: Více než 30 příkladů a návrhů pro tlačítka cílových akcí

Stylový design zápatí vypovídá výmluvně o samotném zdroji. Je důležité si uvědomit, že kupující zde zůstává o něco déle než ve zbytku stránky. Dobrá příležitost pro další poslední výzvu k akci. Často se jedná o předplatné / seznam adresátů, ale můžete také spojit výzvu k akci s registrací účtu.

příklad zápatí: Greetabl

Greetabl má skromně navrženou spodní část stránek, včetně výzvy k odběru. S minimem prvků se hovor stává nápadným a v souladu s tyrkysovým pozadím se promění v dekoraci webu

Příklad zápatí: Ecwid

Pěkný design s výzvami k akci ve spodní části stránek. Struktura prodejce webových stránek je univerzální. Pro miliony zákazníků byl přeložen do 35 jazyků.

4. Plovoucí košík – zvýšení dostupnosti prodejní funkčnosti

Přístup k nákupnímu košíku ze spodní části webu je skvělý způsob, jak zlepšit použitelnost a prodejní kvalitu webu.

Příklad zápatí: Lemonadela

Prodejní web cateringové společnosti je vzhledově příjemný a pro kupujícího pohodlný

5. Navigace v zápatí

Spodní část webu je ideální pro málo zobrazované informace: o společnosti, podmínkách služby a zásadách ochrany osobních údajů. V tomto případě je funkcí patičky zachránit všechny. Člověk se cítí ztracený v prostředí eCommerce a začne se zajímat o infrastrukturu eCommerce a instinktivně listuje…

Negativní prostor je nezbytný pro čitelnost obsahu. Obecně platí, že „zápatí“ neslouží k navigačním účelům, na rozdíl od nabídky nebo mapy webu. Pouze ve výjimečných případech umísťují stránky elektronického obchodu určité kategorie produktů do zápatí (

Tohle je nějaká noční můra! Proč se zápatí vašeho webu znovu zobrazuje a posouvá design? Opravdu nejde něčím pořádně přimáčknout patičku na konec stránky? Obsah nebo alespoň kostky! Cihla v monitoru neleze?

Chápu, pak seďte a nedělejte nic, dokud nedočtete náš článek až do konce.

Vytvoření správného zápatí pro váš web

Mnoho majitelů stránek se s tímto problémem setká, když se zápatí stránky objeví pouze „nahoru“. A pak není jasné, co dělat. Nejčastěji jsou návrhy webových stránek vytvořeny ve spěchu, samy o sobě ( kroužek "šílené ruce") nebo začínající webmasteři.

Přitom na začátku života stránky se nic děsivého neděje. A taková idylka pokračuje tak dlouho, dokud obsah tlačí „vlastní vahou“ na suterén a brání mu ve zvednutí. Vyplatí se však umístit na stránku méně materiálu a nedávno „klidná“ zápatí se okamžitě zvedne, čímž celý design webu dostane nevhodný vzhled.

Pro odstranění této "vady" vytvořené šablony není nutné utrácet peníze za služby webmastera. Nejčastěji lze zápatí webu umístit sami. Zvažme všechny možné možnosti pro odstranění takového problému:

První způsob

První způsob, jak „ukotvit“ zápatí „do spodní části“ stránky, je založen na CSS. Začněme s ukázkovým kódem a pak se blíže podívejme na jeho implementaci:

html ( výška: 100 %; ) záhlaví, navigace, sekce, článek, stranou, zápatí ( zobrazení: blok; ) tělo ( výška: 100 %; ) #wrapper ( šířka: 1000px; okraj: 0 auto; min-výška: 100 %; height: auto !important; height: 100%; ) #header ( height: 150px; background-color: rgb(0,255,255); ) #content ( padding: 100px; height:400px; background-color: rgb(51,255,102) ; ) #footer ( šířka: 1000px; okraj: -100px automaticky 0; výška: 100px; pozice: relativní; barva pozadí: rgb(51,51,204); )

Chcete-li přilepit zápatí ke spodní části značky stránky