En sidfot som alltid sitter längst ner
Här på Piah.se använder jag en teknik som gör att sidfoten alltid sitter fäst mot nedre kanten av webbläsarfönstret. Även när innehållet inte kräver det så sträcks sidorna ut så att sidfoten alltid ligger där.
Tekniken brukar även benämnas sticky footer och är rätt vanlig just på bloggar där sidorna gärna blir långa. Det är inte alls svårt att få till om du har lite vana av HTML/CSS och här beskriver jag hur du gör.
I HTML-koden
Vilken typ av webbplats du än gör (vanliga html-sidor, WordPress-tema m.m.) så ska din sidstruktur likna den här nedan. Det viktiga här är att du i innehållssektionen (<div id="layout"> eller vad du nu vill kalla den) lägger den tomma sektionen namngiven ”push” nedan. Jobbar du med ett WordPress-tema så är det förmodligen i filen footer.php som du har avslutet på innehållssektionen.
<html>
<head>
<link rel="stylesheet" href="style.css" ... />
</head>
<body>
<div id="layout">
Sidans innehåll
<div class="push"></div>
</div>
<div id="footer">Sidfotens innehåll</div>
</body>
</html>
I CSS-filen
I stilmallsfilen är det dessa koder nedan som är viktiga att du har med. Sedan har du säkert fler stilar till dina element än dessa. Som du ser ska den <div> du innesluter hela layouten i ha en negativ nedre marginal med samma värde som #footer och .push har som höjd.
* { margin: 0 }
html, body {
height:100% }
#layout {
min-height:100%; height:auto !important; height:100%;
margin:0 auto -200px auto }
#footer, .push {
height:200px }
Credits
Den som säger sig ha kommit på denna teknik är Ryan Fait. Här kan du läsa samma beskrivning som ovan på engelska på hand hemsida.
På Cssstickyfooter.com kan man läsa om en liknande, men något annorlunda teknik för detta. Bl.a. så använder man padding (utfyllnad) längst ner i innehålls-diven istället för en ”push”.
