Thomas_Jung
Erfahrenes Mitglied
Hallo,
ich habe folgenden Code im Netz gefunden.
Kann mir jemand helfen das Layout zu vervollständigen das es wie es im Anhang (Bild) ausieht.
Herzlichen Dank für ihre Aufmerksamkeit
Gruß Thomas Jung
ich habe folgenden Code im Netz gefunden.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Sticky Footer - Flexbox</title>
<style>
* {
font-family: Arial, sans-serif;
}
html, body {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
padding: 0;
}
header {
background: grey;
color: white;
}
main {
flex: 1;
}
footer {
background: grey;
color: white;
}
.container {
margin: 2em auto;
max-width: 800px;
padding: 0 1em;
}
</style>
</head>
<body>
<header>
<div class="container">
Header
</div>
</header>
<main>
<div class="container">
<h1>Sticky Footer mit Hilfe von CSS »Flexbox«</h1>
<p>Der Sticky Footer wird in dieser Beispieldatei mit Hilfe von CSS »Flexbox« realisiert.</p>
</div>
</main>
<footer>
<div class="container">
Sticky Footer mit variabler Höhe
</div>
</footer>
</body>
</html>
Kann mir jemand helfen das Layout zu vervollständigen das es wie es im Anhang (Bild) ausieht.
Herzlichen Dank für ihre Aufmerksamkeit
Gruß Thomas Jung