Hur man får sidfoten till en del av sidan ("sidfot") att hålla sig till den nedre kanten av fönstret - detta är förmodligen det vanligaste problemet i layouten på webbplatsens sidor. Det finns naturligtvis lösningar, och det finns flera av dem. Nedan följer ett sätt att se till att sidfoten alltid trycks ned längst ner på sidan, oavsett innehåll och webbläsartyp.
Det är nödvändigt
Grundläggande kunskaper om CSS och HTML
Instruktioner
Steg 1
Låt oss ta ett av de mer typiska paginationsscheman som ett exempel - det kommer att ha en vind (sidhuvud), huvudblock och sidfot. Naturligtvis, om det behövs kan du placera flera kolumner i huvudblocket, men vi kommer inte att göra det här, vi kommer bara att fokusera på att inte placera sidfoten. Sidkodens HTML-kod börjar med specifikationen:
Mellan taggarna och, förutom sidrubriken, kommer vi att placera en indikation på kodningen: Liksom en länk till en extern CSS-fil som innehåller en beskrivning av stilar: @import "styles.css"; beskrivning av stilar direkt i html-koden på sidan för att undvika komplikationer med Opera-webbläsaren av den nionde versionen. Mellan taggarna och placera sidstrukturen på sidan. Det första är naturligtvis titelblocket. Vi ger den rubrikidentifieraren för att kunna ställa in stilar för just detta block:
Denna rubrik är alltid högst upp i fönstret.
Sedan - sidans huvudblock. Den kommer att bestå av två kapslade - yttre (identifierare - yttre) och inre (identifierare - yttre omslag):
Detta är huvuddelen.
Och slutligen sidfoten:
Det är sidfot - alltid längst ner i fönstret!
Hela sidan kommer att se ut så här:
Hur man trycker ner på sidfoten
@import "styles.css";
Denna rubrik är alltid högst upp i fönstret.
Detta är huvuddelen.
Det är sidfot - alltid längst ner i fönstret!
Steg 2
Låt oss nu gå vidare till innehållet i stilarket. Den implementerar följande schema: huvudsidans block kommer att ställas in till 100% höjd, titeln kommer att vara helt placerad och sidfoten blir relativt. För att förhindra att rubriken överlappar huvudinnehållet på sidan placeras detta huvudinnehåll i en extra ruta i huvudrutan, och denna extra ruta är inställd på en högsta marginal som är lika med höjden på rubrikrutan. Och sidfoten får en negativ toppmarginal som är lika med dess höjd - på detta sätt höjs den över fönstrets nedre kant till sin fulla höjd. Hela innehållet i css-filen: * {margin: 0; stoppning: 0}
html, kropp {höjd: 100%;} kropp {
svart färg;
position: relativ;
}
#yttre {
min höjd: 100%;
marginal: 0;
bakgrund: vit;
svart färg;
} * html #outer {höjd: 100%;}
#header {
position: absolut;
topp: 0;
vänster: 0;
bredd: 100%;
höjd: 70px;
bakgrund: # 304a00;
överflöd: dold;
färg vit;
textjustera: centrum;
} #footer {
position: relativ;
margin-top: -50px;
tydlig: båda;
bredd: 100%;
höjd: 50px;
bakgrundsfärg: # 304a00;
färg vit;
textjustera: centrum;
}
.outerwrap {
flyta till vänster;
bredd: 100%;
stoppning-topp: 71px;
} Den här filen ska sparas med namnet som vi angav i html-koden på sidan - styles.css.
