Forum for IT, data og webutvikling
Still spørsmål og svar på IT, data og webutvikling
Sider: 1
#1 25-01-2012 13:42:33
- recursion
- Gjest
- Registered: 24-11-2011
- Posts: 26
Sticky Footer i HTML5 uten JavaScript
Her er et eksempel på hvordan du kan ha en såkalt "sticky footer" på en webside, uten JavaScript eller jQuery plugins. Nedenfor har vi laget et eksempel på hvordan du enkelt kan få til dette på websiden din.
<!DOCTYPE html>
<html lang="no">
<head>
<title>Sticky Footer</title>
</head>
<body>
<div class="container">
<article role="main">
<!-- Sett inn ditt innhold her-->
</article>
</div>
<footer>
<p>Her er footeren</p>
</footer>
</body>
</html>Dette er et enkelt eksempel på sticky footer. Du kan legge til flere elementer inne i section[role=main]-elementet, og samtidig ha en sticky footer. NB! Legger du elementer utenfor, kan det være at dette ikke fungerer.
Her er CSS koden
For at footer-elementet skal oppføre seg som en sticky footer uten JavaScript og jQuery plugings, så kan du benytte CSS-koden nedenfor.
html, body {
height: 100%;
}
div.container {
min-height: 100%;
}
article[role=main] {
overflow:auto;
padding-bottom: 100px; /* Padding på ha samme verdi som footer høyde og marginer */
}
footer {
position: relative;
margin-top: -100px; /* Marginen må ha negativ verdi */
height: 100px; /* Høyden til footer */
clear:both;
}Denne koden er testet i Internet Explorer 9, Firefox 9 and Opera 11.x.
Ønsker du å legge til litt farge til footeren, så kan du legge til følgende i CSS-en:
footer {
position: relative; /* It is important to have relative position.*/
margin-top: -100px; /* The margin must have a negative value */
height: 100px; /* Height of footer*/
clear:both;
color:white;
background-color:black;
}Offline
Sider: 1
Quick post
