"Sidfot" är vanligtvis det nedersta blocket för en webbsideslayout. Det vanligaste problemet med att placera den här sidfoten är att alltid placera den längst ner i fönstret, oavsett sidans fullhet eller webbläsartyp. Det har funnits en hel del lösningar på problemet sedan tiden för den massiva övergången till blocklayout, och en av dem ges nedan.
Det är nödvändigt
Grundläggande kunskaper om CSS och HTML
Instruktioner
Steg 1
Låt oss ta det vanligaste sidlayoutschemat som grund - tre block placerade ovanför varandra. Toppen (sidhuvudet) ska alltid vara inriktad mot fönstrets övre kant, botten (sidfoten) - till den nedre kanten, och huvudet (kroppen) bör alltid fylla hela utrymmet mellan dem. Källkoden måste innehålla en länk till XHTML 1.0 Transitional-specifikationen och beskrivningen av stilar måste placeras i en extern CSS-fil (för att undvika problem med Opera 9. XX). HTML-beskrivningen av strukturen måste placeras i huvud sidan av sidan. Det börjar naturligtvis från det övre blocket, i taggen som ett identifieringsattribut med ett värde ska placeras, till exempel divHead:
Sidhuvud.
Huvudblocket ska bestå av ett par kapslade block. Den yttre får divOut-identifieraren och den inre - divContent:
Huvudinnehåll.
Sidfoten är inställd på divFoot:
Sidfot.
Steg 2
Sidans fullständiga HTML-kod ska se ut så här:
Tre kvarter
@import "style.css";
Detta är ett rubrikblock.
Huvudinnehåll.
Det här är sidans sidfot.
Steg 3
Stilbeskrivningen implementerar följande layoutmekanism: mittblocket (divOut) är inställt på 100% höjd, det övre blocket (divHead) kommer att ha absolut positionering och det nedre - relativt. I huvudinnehållsblocket (divContent) måste det finnas ett ledigt utrymme högst upp som höjden på rubrikblocket så att det inte överlappar sidans huvudinnehåll. Och det nedre blocket (sidfoten) ska ha en negativ marginal överst, lika med höjden på detta block. Detta höjer den över webbläsarens fönster. Denna mekanism kan implementeras med en css-fil med följande innehåll: * {margin: 0; stoppning: 0}
html, kropp {höjd: 100%;} kropp {
position: relativ;
färg: # 000;
}
#divOut {
marginal: 0;
min höjd: 100%;
bakgrund: #FFF;
färg: # 000;
}
* html #divOut {höjd: 100%;}
#divHead {
position: absolut;
vänster: 0;
topp: 0;
bredd: 100%;
höjd: 80px;
bakgrund: # 2F5000;
överflöd: dold;
textjustera: centrum;
färg: #FFF;
} #divFoot {
position: relativ;
tydlig: båda;
margin-top: -60px;
höjd: 60px;
bredd: 100%;
bakgrundsfärg: # 2F5000;
textjustera: centrum;
färg: #FFF;
}
.divInnehåll {
bredd: 100%;
flyta till vänster;
stoppning-topp: 81px;
} Namnet du angav för formatmallen i HTML-koden är style.css.
