Varför är min footer mitt i mitt webbsida?

En sidfot kan visas mitt på webbsidan och inte på botten av flera orsaker. En av de vanligaste är att webbplatsens innehåll är litet och sidfoten är upptagen till mitten. Containrarna med sidfoten kan vara kodade felaktigt, kan marginalerna eller vadderingen vara fel och egenskapen "float" kan vara felaktig.

Footer Position

CSS "position" -egenskapen bestämmer var sidfoten placeras på webbsidan i förhållande till de andra sidelementen, till exempel rubriken och huvudkroppsinnehållet. De fem typerna av positionering är statisk position, fast position, relativ position, överlappande läge och absolut position. Absolut positionering i sidfoten används så att sidfotelementet inte beter sig i förhållande till övriga element. Lägg till "position: absolute;" kodning inuti taggarna "#footer" bracket "{" och "}". Dessutom lägg till "botten: 0;" i linjen direkt under "position" -kodningen. Nu placeras sidfoten helt längst ner på webbsidans "DIV" -behållare.

Footer Bredd och Höjd

Fodbredds- och höjighetsegenskaperna kan störa fotarnas positionering. Om fotfoten är för stor tar den upp för mycket utrymme längst ner på webbsidan. Inom taggarna "#footer" på "{" och "}" anges "bredd: Xpx;" och "höjd: Xpx;" kodning. Ändra bredden till "100%" för att göra sidfoten så bred som resten av webbplatsens innehåll. Ändra höjden till önskad pixelstorlek, till exempel "60px" eller "75px". Dessa två ändringar kan bidra till att sidfoten pressas ner till botten av webbsidan.

Marginaler och Padding

Kodning av margen och kuddar kan störa fotfotspositionen. När fotmarginalerna är för smala eller polstret är för brett, flyttar fotfotspositionen och kan flyttas till mitten av webbsidan. En enkel lösning är att ta bort marginalerna och vadderingen helt, så att dessa sidfot motsvarar resten av kodningen. Leta upp "#footer" -egenskapen i webbsidans kodning. Inom konsoltaggarna för "{" och "}" är "marginal: Xpx Xpx Xpx Xpx;" och "vaddering: Xpx Xpx Xpx Xpx;" kodning. Nu är fotmarginalerna och vadderingen bestämda av taggarna "#body" och "#container" högst upp på webbsidan. Ta bort båda kodningsraderna och uppdatera webbsidan.

Container Layout

En sidfot är ett element som är placerat i den övergripande DIV-behållarens layout. När behållarens layoutegenskaper är felaktiga kan det påverka sidfotens position på webbsidan. Innehållet "#container" -hållarens taggar av "{" och "}" är samma "höjd" och "position" -egenskaper. Ändra "höjd" till 100% och ändra "position" till relativ. Lägg till en ny kodningslinje till "#container" och skriv "minhöjd: 100%;", vilket ger hela containerns layout en ny minsta höjd. Nu kommer hela webbsidan att hålla skärmens fulla höjd oavsett hur mycket innehållet är. Den relativa positionen interagerar också positivt med fotens absoluta position.