MrMurphy1: Footer geht nur ans Fensterende

Beitrag lesen

SELF-Forum

Footer geht nur ans Fensterende

MrMurphy1
– Informationen zu den Bewertungsregeln

Hallo,

dein bisheriger Quelltext ist leider für einen Sticky Footer nicht geeignet. Vielleicht hilft dir ein Beispiel weiter wie ich die Seite erstellen würde. Größen, Abstände, Farben u.s.w. können noch angepasst werden.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Sticky Footer 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   /* Hack für IE 10 und IE 11 */
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         background: linear-gradient(to bottom, #101010, #0c0c0c);
         height: 100%;
         min-height: 100vh;
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: column;
      }
      header {
         background: linear-gradient(to bottom, #fa0000, #120000);
         display: flex;
         justify-content: center;
      }
      nav {
         background-color: #F00;
         border: 2px solid black;
         border-radius: 1rem;
         padding: 0.2rem 8rem;
         margin: 4.5rem 0;
         display: flex;
      }
      a {
         text-decoration: none;
         color: yellow;
         padding: 0.3rem 0.5rem;
         border-right: 1px solid black;
         margin: 0;
      }
      a:last-child {
         border-right: none;
      }
      main {
         width: 80%;
         margin-left: 20%;
         flex: 1;
         -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */
      }
      article {
         background-color: white;
         padding: 0.5rem 1rem;
         border-radius: 0.5rem;
      }
      article h1 {
         text-align: center;
      }
      article p {
         border-top: 1px solid black;
         border-bottom: 1px solid black;
      }
      footer {
         text-align: center;
         color: white;
      }
      p {
      }
   }
   /* Vorlage zum Kopieren für Media-Query */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <header>
      <nav>
         <a href="#">xxx</a>
         <a href="#">xxx</a>
         <a href="#">xxx</a>
         <a href="#">xxx</a>
         <a href="#">xxx</a>
         <a href="#">xxx</a>
         <a href="#">xxx</a>
      </nav>
   </header>
   <main>
      <article>
         <h1>Start</h1>
         <p>Hier kommt auf jede Seite dann der Inhalt hin. Wird dieser zu lang, wir er allerdings vom Footer überlappt.</p>
      </article>
   </main>
   <footer>
      <p>Hier ist dann der Footer</p>
   <footer>
</body>
</html>

Gruss

MrMurphy

Beitrag melden
–
Informationen zu den Bewertungsregeln