Hogyan lehet az oldal láblécét ("láblécet") ragasztani az ablak alsó határához - ez valószínűleg a leggyakoribb probléma a webhelyek elrendezésében. Természetesen vannak megoldások, és több is van belőlük. Az alábbiakban meggyőződhetünk arról, hogy a lábléc mindig az oldal aljára van nyomva, függetlenül a tartalom mennyiségétől és a böngésző típusától.
Szükséges
A CSS és a HTML alapismeretei
Utasítás
1. lépés
Vegyünk példaként az egyik tipikusabb oldalszámozási sémát - tetőterét (fejlécét), fő blokkját és láblécét kapja. Természetesen, ha szükséges, több oszlopot is elhelyezhet a fő blokkban, de ezt itt nem fogjuk megtenni, csak arra fogunk koncentrálni, hogy ne helyezzük el a láblécet. Az oldal HTML-kódja a specifikáció deklarációjával kezdődik:
A címkék közé és az oldal címe mellett elhelyezünk egy jelölést a kódolásról, valamint egy linket egy külső CSS fájlra, amely tartalmazza a stílusok leírását: @import "styles.css"; Nem helyezzük el a a stílusok leírása közvetlenül az oldal html-kódjába, hogy elkerülje a kilencedik verzió Opera böngészőjével járó bonyodalmakat. Az első természetesen a címblokk. Megadjuk a fejléc azonosítóját, hogy stílusokat állítson be az adott blokkhoz:
Ez a fejléc mindig az ablak tetején található.
Ezután - az oldal fő blokkja. Két beágyazottból áll - külső (azonosító - külső) és belső (azonosító - külső csomagolás):
Ez a fő rész.
És végül a lábléc:
Lábléc - mindig az ablak alján!
A teljes oldal így fog kinézni:
Hogyan lehet lenyomni a láblécet
@import "styles.css";
Ez a fejléc mindig az ablak tetején található.
Ez a fő rész.
Lábléc - mindig az ablak alján!
2. lépés
Most térjünk át a stíluslap tartalmára. A következő sémát valósítja meg: a főoldal blokkja 100% -os magasságra kerül, a cím abszolút helyzetben lesz, a lábléc pedig viszonylagosan. Annak megakadályozása érdekében, hogy a fejléc átfedje az oldal fő tartalmát, ez a fő tartalom egy további mezőbe kerül a fő mezőben, és ez a kiegészítő mező a felső mezőre van beállítva, amely megegyezik a fejléc mező magasságával. A lábléc pedig negatív felső margót kap, amely megegyezik a magasságával - ily módon az ablak alsó széle fölé emelkedik teljes magasságáig. A css fájl teljes tartalma: * {margin: 0; párnázás: 0}
html, body {magasság: 100%;} body {
fekete szín;
pozíció: rokon;
}
#outer {
min-magasság: 100%;
margó: 0;
háttér: fehér;
fekete szín;
} * html #outer {magasság: 100%;}
#fejléc {
pozíció: abszolút;
felső: 0;
bal: 0;
szélesség: 100%;
magasság: 70px;
háttér: # 304a00;
túlcsordulás: rejtett;
fehér szín;
text-align: center;
} #footer {
pozíció: rokon;
margin-top: -50px;
egyértelmű: mindkettő;
szélesség: 100%;
magasság: 50px;
háttérszín: # 304a00;
fehér szín;
text-align: center;
}
.outerwrap {
balra lebeg;
szélesség: 100%;
topding-top: 71px;
} Ezt a fájlt azzal a névvel kell menteni, amelyet az oldal html-kódjában megadtunk - styles.css.
