Sådan får du sidefoddelen af siden ("sidefod") til at holde sig til den nederste kant af vinduet - dette er sandsynligvis det mest almindelige problem i layoutet af websidesider. Der er selvfølgelig løsninger, og der er flere af dem. Nedenfor er en måde at sikre, at sidefoden altid trykkes til bunden af siden, uanset mængden af indhold og typen af browser.
Er det nødvendigt
Grundlæggende viden om CSS og HTML
Instruktioner
Trin 1
Lad os tage et af de mere typiske pagineringsordninger som et eksempel - det vil have et loft (header), hovedblok og sidefod. Selvfølgelig kan du om nødvendigt placere flere kolonner i hovedblokken, men det gør vi ikke her, vi vil kun fokusere på ikke at placere sidefoden. HTML-koden på siden begynder med erklæringen om specifikationen:
Mellem tags og ud over sidetitlen placerer vi en indikation af kodningen: Samt et link til en ekstern CSS-fil, der indeholder en beskrivelse af typografier: @import "styles.css"; Vi placerer ikke beskrivelse af stilarter direkte ind i html-koden på siden for at undgå komplikationer med Opera-browseren i den niende version. Mellem tags og placer sidens blokstruktur. Den første er selvfølgelig titelblokken. Vi giver det header-id'et for at kunne indstille typografier til denne særlige blok:
Denne overskrift er altid øverst i vinduet.
Derefter - hovedblokken på siden. Det vil bestå af to indlejrede - ydre (identifikator - ydre) og indre (identifikator - ydre omslag):
Dette er hoveddelen.
Og endelig sidefoden:
Det er sidefod - altid nederst i vinduet!
Den komplette side vil se sådan ud:
Sådan presses sidefoden ned
@import "styles.css";
Denne overskrift er altid øverst i vinduet.
Dette er hoveddelen.
Det er sidefod - altid nederst i vinduet!
Trin 2
Lad os nu gå videre til indholdet af stilarket. Det implementerer følgende skema: hovedsidesættet indstilles til 100% højde, titlen vil være absolut placeret, og sidefoden vil være relativt. For at forhindre overskriften i at overlappe hovedindholdet på siden, placeres dette hovedindhold i et ekstra felt i hovedfeltet, og dette ekstra felt er indstillet til en topmargen svarende til højden på overskriftsfeltet. Og sidefoden får en negativ topmargen svarende til dens højde - på denne måde hæves den over vinduets nederste kant til sin fulde højde. Fuldt indhold af css-filen: * {margin: 0; polstring: 0}
html, krop {højde: 100%;} krop {
farve: sort;
position: relativ;
}
#outer {
min. højde: 100%;
margen: 0;
baggrund: hvid;
farve: sort;
} * html #outer {højde: 100%;}
#header {
position: absolut;
top: 0;
venstre: 0;
bredde: 100%;
højde: 70 px;
baggrund: # 304a00;
overløb: skjult;
farve: hvid;
tekstjustering: center;
} #footer {
position: relativ;
margin-top: -50px;
klart: begge;
bredde: 100%;
højde: 50px;
baggrundsfarve: # 304a00;
farve: hvid;
tekstjustering: center;
}
.outerwrap {
flyde: venstre;
bredde: 100%;
polstring-top: 71px;
} Denne fil skal gemmes med det navn, som vi specificerede i html-koden på siden - styles.css.
