Beispiel:Position-fixed-2.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> footer { position:fixed; padding: 1em; bottom:0; left: 0; right:0; background: #c82f04; border-color: #8a9da8; }
footer p { float:right; margin: 0; color: white; } footer a { color:skyblue; } header { padding: 1em; background: #F1F3F4; border-bottom: thin solid #d5d5d5; }
header img { width: 5em; margin-right: 1em; float:left; }
body { font-family: sans-serif; color: #333333; 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> <title>Bsp.1 - fixer footer</title> </head>
<body> <header> <img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="logo">
Inhaltsverzeichnis
Seitentitel
</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
Mittels position:fixed wird das footer-Element als feststehendes Element definiert, mittels bottom:0px; wird es 0 Pixel von der Unterkante des Darstellungsbereiches entfernt, also ganz unten positioniert.
</aside>
<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> <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>
