MrMurphy1: Problem mit Größe und Positionierung Footer

Beitrag lesen

Hallo,

ich würde das mit Flexbox erledigen, zum Beispiel:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Container anordnen 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;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 100%;
         line-height: 1.3;
      }
      body {
         height: 100%;
         min-height: 99vh;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-direction: column;
         flex-direction: column;
      }
      body {
         padding: 0;
         margin: 0;
         background-color: #532901;
         padding: 1rem 5%;
      }
      ul {
         padding: 0;
      }
      li {
         list-style-type: none;
      }
      body>nav,
      main,
      footer {
         background-color: #eec277;
         width: 100%;
         padding: 0;
      }
      main {
         display: flex;
      }
      main>aside, 
      main>article {
      padding: 0.5rem;
      }
      main {
         flex: 1;
         -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */
      }
      main>aside {
         min-width: 10rem;
         flex: 1 20%;
      }
      main>article {
         background-color: #f7e7b6;
         border: 1px #E5E7EB solid;
         flex: 1 80%;
      }
      aside nav a {
         color: black;
      }
      body>nav ul,
      footer ul {
         padding: 0;
         margin: 0;
         display: flex;
      }
      body>nav ul li,
      footer ul li {
         margin: 0;
         display: flex;
      }
      body>nav ul li a,
      footer ul li a {
         color: black;
         display: block;
         padding: 0.5rem;
         border: 0;
         border-right: 2px solid orange;
         margin: 0;
      }
   }
   </style>
</head>
<body>
   <nav>
      <ul>
         <li class="current"><a href="#">Home</a></li>
         <li><a href="#">Mitglieder</a></li>
         <li><a href="#">Infos</a></li>
         <li><a href="#">Missionen</a></li>
         <li><a href="#">Jedi-Archiv</a></li>
         <li><a href="#">Jeditorials</a></li>
      </ul>
   </nav>
   <main role="main">
      <aside>
         <nav>
            <ul>
               <li><a href="#">Forum</a></li>
               <li><a href="#">Chat</a></li>
               <li><a href="#">Gästebuch</a></li>
               <li><a href="#">Kontaktformular</a></li>
            </ul>
         </nav>  
      </aside>
      <article>
         <h1>Herzlich Willkommen</h1>
         <p>Wir freuen uns, Sie auf unserer Homepage begrüßen zu können. Informieren Sie sich auf unserer Internetpräsenz über unser Unternehmen und unsere Leistungen. Unser Geschäft stellt Ihnen eine große Bandbreite zur Verfügung, aus der Sie ganz nach Ihrem Geschmack wählen können. Dabei unterstützen wir Sie mit einer umfassenden und fachlich kompetenten Beratung.</p>
         <p>Sie möchten mehr über uns und unser Angebot erfahren? Gerne stellen wir uns Ihnen vor. Unser Team ist jederzeit gerne für Sie da ist. Wir freuen uns auf Sie!jfkdhgfkdfhgkf</p>
         <p>Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim.</p>
         <p>Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. Heizölrückstoßabdämpfung.</p>
         <p>Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim.</p>
      </article>
   </main>
   <footer>
      <nav>
         <ul>
            <li><a href="#">Sitemap</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Impressum</a></li>
         </ul>
      </nav>
   </footer>
</body>
</html>

Gruss

MrMurphy