Beispiel:Flexfooter-3.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Feste Breite mit flexiblem padding</title> <style> body { margin: 0; font: 1.25em Calibri, sans-serif;
display: flex; min-height: 100vh; margin: 0 auto; flex-direction: column; }
body > * { padding: 0.5em; padding-left: calc((100% - 30em) / 2); padding-right: calc((100% - 30em) / 2); }
header, footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background: hsl(0, 0%, 95%); }
- logo
{ width: 3em; margin: 0 2em 0 0.5em; fill: hsl(13, 96%, 39%); /*SELF-red */ }
- logo use
{ fill: hsl(0, 0%, 30%); }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
nav a { padding: 0.25em 0.5em; text-decoration: none; color: hsl(13, 96%, 39%); }
nav a:focus, nav a:hover { background: hsl(13, 96%, 39%); color: white; }
main { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Golden_Gate_Bridge_and_San_Francisco_skyline_from_Hawk_Hill_at_Blue_Hour_dllu.jpg/1280px-Golden_Gate_Bridge_and_San_Francisco_skyline_from_Hawk_Hill_at_Blue_Hour_dllu.jpg); background-size: cover; background-color: #fdfcf3; min-height: 10em;
flex: 1;
color: #dfac20; }
footer { background-color: #ebf5d7; border: 1px solid #8db243; }
section img { width: 100%; }
</style>
</head>
<body> <header> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" id="logo" viewBox="-2 -1 4 2"> <path id="logo-part" d="m-2,-1 1,0 1,1 -1,1 -1,0 1,-1z"/> <use xlink:href="#logo-part" transform="scale(-1 1)"/> </svg> <nav>
- <a href="">eene</a>
- <a href="">meene</a>
- <a href="">muh</a>
</nav> </header>
<main>
Feste Breite mit flexiblem padding
</main>
<footer> <a href="#">Impressum</a> <a href="#">Kontakt</a> </footer>
</body>
</html>
