Füllen des Restbereichs des Content Bereichs

Nugorra

Nugorra

Mitglied
Hallo zusammen,

ich arbeite gerade an einer Seite die (skizziert) folgenden Aufbau hat:
HTML: 
<html>
  <body>
    <div id="SiteContainer">
      <header>
        Ist befüllt und macht alles richtig
      </header>
      <div id="ContentContainer">
       <div id="Oben">
         Ist befüllt und macht alles richtig 
       </div>
       <div id="unten">
          Bekommt keinen bzw. Leerzeichen als Content
       </div>
      </div>
      <footer>
        Ist befüllt und macht alles richtig
     </footer>       
    </div>
  </body>
</html>

Wenn das DIV Oben nun befüllt ist, soll der Rest des Inhaltes bis zum Footer vom unteren DIV ausgefüllt werden.
Diese Seite soll für ein CMS verwendet werden, was Feste Höhen für oberen wie unteren Bereich ausschließt.
Hat jemand eine Idee für dieses Problem, die nach Möglichkeit ohne JS auskommt?

MfG
Nugorra
 
Code: 
       <div id="unten">
          Bekommt keinen bzw. Leerzeichen als Content
       </div>
Zum Vergrößern anklicken....

Was macht dieser Container für einen Sinn?

Ich vermute mal, du suchst sowas wie FooterSticky. Einfach Gooeln.
 
Zuletzt bearbeitet:
Wenn es nur so simpel wäre.

Hier mal in übel bunt dargestellt:
grün: statische höhe
blau: Kann sich Erweitern wenn Zuviel Inhalt enthalten ist
gelb: hier wird der SeitenInhalt eigegeben und definiert darüber die Höhe
rot: Soll den freien Bereich zwischen gelb und dem grünen Footer ausfüllen

Demo.jpg
 
Übel bunt zurück.
Code: 
<!DOCTYPE HTML>

<html>
<head>
<meta charset="UTF-8" />
<title>Test-Layout</title>
<style type="text/css">

*  {
 margin:0;
 padding:0;
 list-style:none;
}
 
body {
 background:#0f0;
} 

#SiteContainer {
 width:100%;
 margin:0 auto;
 background:#00f;
 overflow:hidden;
 min-height:500px;
 position:relative;
}
 
#SiteContainer:before {
 content:"";
 position:absolute;
 top:0;bottom:0;left:20%;
 width:60%;
 background:#f00;
}

header , footer {
 background:#0f0;
 position:relative;
}

#Oben {
 width:60%;
 margin:0 auto;
 position:relative;
 background:#ff0;
}

footer {
 background:#0f0;
}

p {
 padding:10px;
}
</style>
<title>Float/Margin-Layout</title>
</head>
<body>
   <div id="SiteContainer">
      <header>
        <p>Ist befüllt und macht alles richtig</p>
      </header>
       <div id="Oben">
         <p>Ist befüllt und macht alles richtig</p> 
       </div>
    </div>
      <footer>
        <p>Ist befüllt und macht alles richtig</p>
     </footer>       
</body>
</html>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück