Ako dosiahnuť, aby sa päta časti stránky („päta“) prilepila k dolnému okraju okna - to je pravdepodobne najbežnejší problém v usporiadaní stránok. Riešenia samozrejme existujú a je ich niekoľko. Nižšie uvádzame jeden zo spôsobov, ako sa ubezpečiť, že päta je vždy stlačená na koniec stránky bez ohľadu na množstvo obsahu a typ prehľadávača.
Je to nevyhnutné
Základné znalosti CSS a HTML
Inštrukcie
Krok 1
Vezmime si ako príklad jednu z typickejších schém stránkovania - bude mať podkrovie (hlavičku), hlavný blok a pätu. Samozrejme, ak je to potrebné, môžete do hlavného bloku vložiť niekoľko stĺpcov, ale nebudeme to tu robiť, zameriame sa iba na to, aby sme neumiestnili pätu. HTML kód stránky bude začínať deklaráciou špecifikácie:
Medzi značky a okrem názvu stránky umiestnime údaj o kódovaní: Rovnako ako odkaz na externý súbor CSS obsahujúci popis štýlov: @import "styles.css"; Nebudeme umiestňovať popis štýlov priamo do html kódu stránky, aby sa predišlo komplikáciám s prehliadačom Opera deviatej verzie. Medzi značky a umiestnením blokovej štruktúry stránky. Prvým je samozrejme rohovka. Dáme mu identifikátor hlavičky, aby bolo možné nastaviť štýly pre tento konkrétny blok:
Táto hlavička je vždy v hornej časti okna.
Potom - hlavný blok stránky. Bude sa skladať z dvoch vnorených - vonkajší (identifikátor - vonkajší) a vnútorný (identifikátor - vonkajší obal):
Toto je hlavná časť.
A na záver päta:
Je to päta - vždy v spodnej časti okna!
Celá stránka bude vyzerať takto:
Ako stlačiť pätičku
@import "styles.css";
Táto hlavička je vždy v hornej časti okna.
Toto je hlavná časť.
Je to päta - vždy v spodnej časti okna!
Krok 2
Prejdime teraz k obsahu šablóny so štýlmi. Implementuje nasledujúcu schému: blok hlavnej stránky bude nastavený na 100% výšky, nadpis bude absolútne umiestnený a päta bude relatívne. Aby sa zabránilo tomu, že nadpis prekrýva hlavný obsah stránky, je tento hlavný obsah umiestnený do ďalšieho poľa v hlavnom poli a toto ďalšie pole je nastavené na horný okraj rovný výške poľa nadpisu. A päta dostane horný horný okraj, ktorý sa rovná jeho výške - týmto spôsobom sa zvýši nad spodný okraj okna do celej výšky. Celý obsah súboru css: * {margin: 0; výplň: 0}
html, telo {výška: 100%;} telo {
farba: čierna;
poloha: relatívna;
}
#vonkajšie {
min. výška: 100%;
okraj: 0;
pozadie: biele;
farba: čierna;
} * html #outer {vyska: 100%;}
#header {
pozícia: absolútna;
hore: 0;
vľavo: 0;
šírka: 100%;
výška: 70px;
pozadie: # 304a00;
prepad: skrytý;
farba: biela;
zarovnanie textu: na stred;
} #footer {
poloha: relatívna;
horný okraj: -50px;
jasné: oboje;
šírka: 100%;
výška: 50px;
farba pozadia: # 304a00;
farba: biela;
zarovnanie textu: na stred;
}
.outerwrap {
plavák: vľavo;
šírka: 100%;
polstrovaný vrch: 71px;
} Tento súbor by sa mal uložiť s názvom, ktorý sme zadali v html-kóde stránky - styles.css.
