Hvorfor er min fodbold i midten af ​​min webside?

En webstedsfodbold vises muligvis midt på websiden og ikke på bunden af ​​en række årsager. Et af de mest almindelige er, at indholdet på hjemmesiden er lille, og footer'en skubbes op til midten. Containerne med fodfodsen kan være kodet forkert, margenerne eller polstringerne kan være forkerte, og "float" - ejendommen kan være forkert.

Fodplacering

Fodbold CSS "position" -egenskaben bestemmer, hvor fodfoden er placeret på websiden i forhold til de andre sideelementer, som hovedteksten og hovedkropsindholdet. De fem typer positionering er statisk position, fast position, relativ position, overlappende position og absolut position. Absolut positionering i footer bruges, så fodenelementet ikke opfører sig i forhold til de andre elementer. Tilføj "position: absolut;" kodning inde i "#footer" bracket "{" og "}" tags. Desuden tilføj "bund: 0;" i linjen direkte under "position" -kodningen. Nu er fodfoden placeret helt nederst på websiden "DIV" -beholderen.

Fodboldbredde og højde

Fodbordsbredden og højdeegenskaberne kan interferere med fodplaceringen. Hvis footer er for stor, tager det for meget plads nederst på websiden. Inden for "#footer" -konsoletiketterne "{" og "}" angives "bredde: Xpx;" og "højde: Xpx;" kodning. Skift bredden til "100%" for at gøre footer så bred som resten af ​​indholdet på hjemmesiden. Skift højden til den ønskede pixelstørrelse, f.eks. "60px" eller "75px." Disse to ændringer kan bidrage til, at footer'en skubbes ned til bunden af ​​websiden.

Margener og polstring

Krydsning af margen og polstring kan forstyrre bundsekvensen. Når footer-marginalerne er for snævre eller polstring er for bred, skifter footerpositionen og kan flytte til midten af ​​websiden. En nem løsning er at fjerne marginerne og polstringerne helt, så disse sidemæssige egenskaber svarer til resten af ​​kodningen. Find "#footer" egenskaben i websiden kodning. Inden for bracket tags af "{" og "}" er "margin: Xpx Xpx Xpx Xpx;" og "polstring: Xpx Xpx Xpx Xpx;" kodning. Nu er footer-marginerne og polstringerne bestemt af tagsne "#body" og "#container" øverst på websiden. Fjern begge kodelinjer og opdatér websiden.

Containerlayout

En sidefod er et element, der er placeret inden for det samlede DIV-containerlayout. Når beholderlayoutegenskaberne er forkerte, kan det påvirke sidens position på websiden. Inde i "#container" -beslagets tags med "{" og "}" er de samme "højde" og "position" egenskaber. Skift "højden" til 100% og skift "position" til relativ. Tilføj en ny kodningslinje til "#container" og skriv "min-højde: 100%;", som giver hele beholderlayoutet en ny minimumshøjde. Nu vil hele websiden forblive den fulde højde på skærmen uanset mængden af ​​indhold. Den relative position interagerer også positivt med foders absolutte position.