Hefty_Schlumpf: Problem mit Größe und Positionierung Footer

SELF-Forum

Problem mit Größe und Positionierung Footer

Hefty_Schlumpf (Versionen)
– Informationen zu den Bewertungsregeln

Hallo,

ich versuche mich gerade einer Homepage und habe ein Problem.

Und zwar habe ich einen Header, darunter eine Menüzeile, dann kommt ein zweigeteilter Abschnitt und ein Footer.

Ich habe es über box-sizing: border-box hinbekommen, dass in dem zweigeteilten Bereich mit dem aktuellen Beispieltext beide Bereiche gleich groß sind. (Siehe Bild 1)

Wenn ich aber nun im rechten Teil mehr Text drin habe, passt sich dieser Bereich an, aber der Linke nicht. Wie kann ich diese beiden Bereiche quasi aneinander koppeln, so dass sie immer die gleiche Höhe haben? (Bild 2)

Auszug aus der Html-Datei:

<main role="main">
<nav id="menu">
  <ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="1-unterseite.html">Mitglieder</a></li>
    <li><a href="1-unterseite.html">Infos</a></li>
    <li><a href="1-unterseite.html">Missionen</a></li>
    <li><a href="1-unterseite.html">Jedi-Archiv</a></li>
    <li><a href="1-unterseite.html">Jeditorials</a></li>
  </ul>
</nav>
<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.<br>
    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>
  <p>
    <!-- viel Text entfernt -->
  </p>
</article>

<aside>
  <nav id="navigation">
    <ul>
      <li><a href="index.html">Forum</a></li>
      <li><a href="1-unterseite.html">Chat</a></li>
      <li><a href="1-unterseite.html#">Gästebuch</a></li>
      <li><a href="1-unterseite.html">Kontaktformular</a></li>
    </ul>
  </nav>  
</aside>
	
</main>

<footer>
<nav id="foot">
  <ul>
    <li><a href="1-unterseite.html">Sitemap</a></li>
    <li><a href="2-kontakt.html">Kontakt</a></li>
    <li><a href="2-kontakt.html">Impressum</a></li>
  </ul>
</nav>
</footer>

Auszug aus CSS:

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

article {
  background: #f7e7b6;
  border: 1px #E5E7EB solid; 
  margin-top: 50px;
  padding: 30px;
  width: 77%;
  min-height: 100vh;
  float:right;
}

aside {
  float: left;
  width: 23%;
}
aside ul {
  line-height: 1.6em;
  list-style: none outside none;
  padding: 1em 0 1em 5px;
  clear: left;
}

nav#navigation{
  float: left;
  margin-right: 30px;
  margin-top: 50px;
  width: 225px;
  min-height: 100vh;
  background-color: #eec277;
}

nav#foot { 
  width: 990px;  
  list-style-type: none;
  position: relative;
  left: -20px;
  display: block;
}

Desweiteren habe ich noch das Problem, dass ich den footer nicht richtig positioniert bekomme. Er sollte direkt an das Ende des oberen Bereichs anschließen, ohne Lücke. Wenn ich hier bei position: absolute nehme, hab ich den footer, oben auf der Menüleiste über dem zweigeteilten Bereich hängen.

Ich hoffe, mir kann jemand helfen? Danke schon mal!! [Alternativ-TextAlternativ-Text]

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem mit Größe und Positionierung Footer

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Hefty_Schlumpf

    Wie kann ich diese beiden Bereiche quasi aneinander koppeln, so dass sie immer die gleiche Höhe haben?

    Mit Flexbox:

    LLAP 🖖

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem mit Größe und Positionierung Footer

      Regina Schlaukrug
      – Informationen zu den Bewertungsregeln

      im Wiki:

      LG Regina

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Problem mit Größe und Positionierung Footer

    MrMurphy1
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. vendor-prefixes für Flexbox

      Matthias Scharwies
      – Informationen zu den Bewertungsregeln

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

            * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      body {
         display: -ms-flexbox;
         display: flex;
         -ms-flex-direction: column;
         flex-direction: column;
      }
      main {
         flex: 1;
         -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */
      }

      Ich würde bei der Verwendung von flexbox die Unterstützung von IE10 mit dem Browser-präfix -ms- nicht verwenden, da man hier die alte Syntax berücksichtigen muss und der IE10 nicht sehr viele Nutzer hat.

      http://www.browser-statistik.de/statistiken/versionen/

      Stattdessen müssten aber Safari und Android mit -webkit- berücksichtigt werden.

      caniuse: flex

      LG Matthias

      BTW: box-sizing ist mittlerweile Präfixfrei: caniuse: box-sizing

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln