Jak sprawić, by stopka strony ("stopka") przylegała do dolnej krawędzi okna - to chyba najczęstszy problem w układzie stron serwisu. Są oczywiście rozwiązania, a jest ich kilka. Poniżej znajduje się jeden ze sposobów, aby upewnić się, że stopka jest zawsze dociskana do dołu strony, niezależnie od ilości treści i rodzaju przeglądarki.
Czy to jest to konieczne
Podstawowa znajomość CSS i HTML
Instrukcje
Krok 1
Weźmy za przykład jeden z bardziej typowych schematów stronicowania - będzie miał strych (nagłówek), blok główny i stopkę. Oczywiście w razie potrzeby można w głównym bloku umieścić kilka kolumn, ale nie zrobimy tego tutaj, skupimy się tylko na niepozycjonowaniu stopki. Kod HTML strony rozpocznie się od deklaracji specyfikacji:
Pomiędzy tagami oraz, oprócz tytułu strony, umieścimy informację o kodowaniu: Oraz link do zewnętrznego pliku CSS zawierającego opis stylów: @import "styles.css"; Nie będziemy umieszczać opis stylów bezpośrednio w kodzie html strony, aby uniknąć komplikacji z przeglądarką Opera w wersji dziewiątej. Pomiędzy tagami i umieść blokową strukturę strony. Pierwszy to oczywiście blok tytułowy. Podamy mu identyfikator nagłówka, aby móc ustawić style dla tego konkretnego bloku:
Ten nagłówek jest zawsze na górze okna.
Następnie - główny blok strony. Będzie składał się z dwóch zagnieżdżonych - zewnętrznego (identyfikator - zewnętrzna) i wewnętrznego (identyfikator - zewnętrzna):
To jest główna część.
I wreszcie stopka:
To stopka - zawsze na dole okna!
Cała strona będzie wyglądać tak:
Jak docisnąć stopkę
@import "styles.css";
Ten nagłówek jest zawsze na górze okna.
To jest główna część.
To stopka - zawsze na dole okna!
Krok 2
Przejdźmy teraz do zawartości arkusza stylów. Realizuje następujący schemat: blok strony głównej zostanie ustawiony na 100% wysokości, tytuł będzie pozycjonowany bezwzględnie, a stopka będzie względnie. Aby zapobiec nakładaniu się nagłówka na główną zawartość strony, ta główna zawartość jest umieszczana w dodatkowym polu w polu głównym, a to dodatkowe pole jest ustawione na margines górny równy wysokości pola nagłówka. A stopka otrzymuje ujemny margines górny równy jej wysokości - w ten sposób zostanie ona podniesiona ponad dolną krawędź okna do pełnej wysokości. Pełna zawartość pliku css: * {margin: 0; wypełnienie: 0}
html, body {height: 100%;} body {
kolor czarny;
pozycja: względna;
}
#zewnętrzny {
wysokość min: 100%;
margines: 0;
tło: białe;
kolor czarny;
} * html #outer {wysokość: 100%;}
#nagłówek {
pozycja: bezwzględna;
góra: 0;
po lewej: 0;
szerokość: 100%;
wysokość: 70px;
tło: #304a00;
przelew: ukryty;
kolor biały;
wyrównanie tekstu: środek;
} #stopka {
pozycja: względna;
górny margines: -50px;
oba czyste;
szerokość: 100%;
wysokość: 50px;
kolor tła: # 304a00;
kolor biały;
wyrównanie tekstu: środek;
}
.opakowanie zewnętrzne {
pływak: lewy;
szerokość: 100%;
dopełnienie górnej części: 71px;
} Plik ten należy zapisać pod nazwą, którą podaliśmy w kodzie html strony - styles.css.
