Beispiel:Flexfooter-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Flex-Footer</title>
 <style>
 body {
   display: flex;
   min-height: 100vh;
   margin: .5rem 1rem;
   flex-direction: column;
 }

 main {
   min-height: 5em;
   flex: 1;
 }

footer {

   background-color: #fffbf0; 
   border: 1px solid #e7c157;
   border-radius: 0 .5rem .5rem;
   margin: 1rem;
   padding: 1rem;

}

</style> </head>

<body>

feststehender Footer mit Flexbox

 <main>

main

 </main>

 <footer>

footer

mit Flexbox am unteren Rand positioniert

 </footer>

</body> </html