Beispiel:CSS-sticky-footer.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sticky footer und header</title> <style> header { position:sticky; top: 0; left: 0; right: 0; text-align: center; padding: 1em; background: #F1F3F4; border-bottom: thin solid #d5d5d5; }
header img { width: 5em; margin-right: 1em; float:left; } footer { position: sticky; padding: .5em; bottom:0; left: 0; right:0; background: #c82f04; border-color: #8a9da8; }
footer p { float:right; margin: 0; color: white; }
footer a {color: skyblue;}
body { font-family: sans-serif; color: #333333; padding: 8em 0 3em; margin: 1em auto; max-width: 60em; }
/* 2-spaltiges Layout für breitere Viewports */ @media (min-width: 25em) { main { display: grid; grid-template-columns: 12em 1fr; }
aside,article { grid-column-start: 2; } } /* 3-spaltiges Layout für breitere Viewports */ @media (min-width: 40em) { main { display: grid; grid-template-columns: 12em 1fr 1fr; } aside{ grid-column-start: 3; } article:first-of-type { grid-row-start: 1; grid-column-start: 2;} }
nav, nav a, main, article, section, aside { border-radius: 0px 0.5em 0.5em; border: thin solid; padding: .5em; margin: .5em; }
nav { background: #fffbf0; border-color: #e7c157; height: 16em; }
nav ul { padding: 0; }
nav li { list-style: none; margin: 0; padding: 0.5em; }
nav a { display: block; padding: 0.2em 10px; font-weight: bold; text-decoration: none; background-color: #e7c157; color: #333; }
nav ul a:hover, nav ul a:active { color: #fffbf0; background-color: #dfac20;; }
main { background: #c4ced3; border-color: #8a9da8; }
article { background: #ffede0; border-color: #df6c20; }
article p { margin-bottom: 10em; } aside { background: #ebf5d7; border-color: #8db243;height: min-content; }
</style>
</head>
<body> <header> <img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="logo">
Inhaltsverzeichnis
</header>
<main> <nav>
- <a href="#link_1.html">Startseite</a>
- <a href="#link_2.html">Unterseite 1</a>
- <a href="#link_3.html">Unterseite 2</a>
- <a href="#link_4.html">Kontakt</a>
</nav>
<aside id="info">
Info-Box
Mit position: sticky werden footer- und header-Element als feststehende
Elemente definiert. Mittels bottom: 0; wird der footer 0px von der
Unterkante des Darstellungsbereiches entfernt, also ganz unten
positioniert. Der header wird mit top: 0; ganz oben positioniert.
Auch die Navigation „klebt“ 10em von oben entfernt immer im Sichtbereich des Nutzers
</aside>
<article>
CSS-basierte Layouts
sticky Webseite
Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.
Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.
Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.
</article> <article>
CSS-basierte Layouts
Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.
Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.
Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.
</article> <article>
CSS-basierte Layouts
Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.
Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.
Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.
</article> </main>
<footer> <a href="#kontakt.html">Kontakt</a>
© 2014, 2025 by SELFHTML
</footer> </body> </html>
