CSS Inneres div an vertikales Ende von äußerem div

mosquito87 · 23. November 2012

Hallo zusammen,

der Titel des Threads klingt ein wenig kompliziert, doch mein Anliegen ist recht simpel:
Ich versuche momentan gerade, eine HTML/CSS-Layout-Datei zu basteln. Als Grundlage dient das 960grid.

Momentan schaut das Ganze so aus (ich habe die einzelnen divs für euch und auch für mich mal eingefärbt):

Ich will nun aber, dass der Footer (pink) an das Ende des äußeren Grids vertikal verschoben wird, also mit der Navigation links (orange) abschließt.
Dazu soll der blaue Bereich (Content) aufgefüllt werden.

Wie ist das am einfachsten und saubersten zu realisieren?

Groß CSS-Eigenschaften habe ich jetzt an der Stelle noch nicht verwendet, außer eben die Klassen für die einzelnen div-Breiten, die das 960grid bereitstellt (der Container hat eine Gesamtbreite von 12, aber das sollte ja irrelevant sein).

Batti · 23. November 2012

Du könntest die Navigation und den Content mit einem div umschließen. Der Footer würde dann unter diesem div bündig links abschließen.

Daaron · 23. November 2012

falls dein container-div sich an den linken teil angleicht: position:absolute; bottom:0;

ITserVice · 23. November 2012

Wenn du den Content-Div auffüllst, rutscht der Footer doch automatisch mit runter, oder?

Oder willst du den Footer generell als Letztes? Dann würde ich dir empfehlen den Footer außerhalb deines Containers für den Content zu tun. Wenn du sonst alles über den "standard" Weg gelöst hast, dann sollte sich (ich würde den Footer sowieso genauso breit wie den Header machen…) bei 100% Breite der Footer sowieso dann ans Ende schieben.

Crizzo · 23. November 2012

Soll die Unterkante vom Footer immer mit der des orangefarbenen Bereichs auf gleicher Höhe sein? Was ist wenn der blaue Bereich höher als der orangefarbene ist, was soll dann passieren?

Oder soll der Footer immer ganz unten sein und sich jeweils unter der Unterkante von Content oder des orangefarbenen Bereichs befinden?

mosquito87 · 23. November 2012

Hi,

schon mal danke für die vielen Antworten.

Ich muss das Anliegen wohl noch etwas präzisieren:

Der Footer-Bereich soll nur so breit wie der Content sein und das untere Ende des Footers immer, horizontal gesehen, mit dem unteren Bereich der Navigation (orange) abschließen.
Die Enden müssen also immer auf der gleichen Höhe sein.
Ist der blaue Bereich "höher" als der orangene, muss der orangene verlängert werden. Und ggf. umgekehrt.

Man könnte natürlich auch den Footer genau so breit machen wie der Header, ist aber hier nicht gewollt. Es muss doch irgendeine Möglichkeit geben!?

Crizzo · 23. November 2012

Google mal "Faux Columns" und "Footer Alt Stick".

Eine Kombination aus den beiden, sollte dich zum Ziel bringen.

Grüße

Standar(D!) · 23. November 2012

Hallo,
ich benutze für solche Sachen immer die CSS-Eigenschaft display:table/table-cell.
Für dein Beispiel würde das bedeuten, dass der Footer immer unten bündig mit dem Navigationsbereich abschließt. Die Höhe des orangenen Bereichs passt sich dabei dynamisch dem blauen Bereich an.
Dein Layout könnte man so umsetzen (schnell zusammengeschustert

):

HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>Columns</title>
<style>
  body {
    width:80%;
    margin:0 auto;}
  header {
    background:#b6ff01;
    padding:20px;}
  nav {
    width:25%;
    display:table-cell;
    background:#fd6a00;}
  #container {
    background:#0094fe;
    display:table-cell;
    border-left:30px solid #fff;}
  footer {
    background:#ff00db;
    display:table;
    border-top:10px solid yellow;
    width:100%;}
  #content {min-height:500px;}
</style>
</head>
<body>
    <header>
      <h1>Das ist der Header :)</h1>
    </header>
    <nav>
      <h2>Navigation</h2>
    </nav>
  <div id="container">
    <div id="content">
      <h2>Das ist der Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
    </div>
    <footer>
      <h2>Das ist der Footer</h2>
    </footer>
  </div>
</body>
</html>

Daaron · 23. November 2012

Nicht alle Browser unterstützen display:table.... das ist nur ne halbe Lösung.

Günstiger wäre, einfach auf YAML zu setzen.

Standar(D!) · 24. November 2012

Daaron schrieb:
Nicht alle Browser unterstützen display:table.... das ist nur ne halbe Lösung.

Soweit mir bekannt ist, unterstützen alle aktuellen Browser die display:table-Eigenschaft. Selbst der Internet Explorer ab Version 8. (siehe auch http://caniuse.com/css-table).

Müssen Webseiten in jedem Browser identisch aussehen?

Ob die Gestaltung per CSS3 nur "'ne halbe Lösung "ist, sei dahingestellt, denn letztendlich wird jeder Entwickler von allen möglichen Lösungsansätzen die Vor- und Nachteile abwägen und dann entscheiden, welche Umsetzung am besten ins Konzept passt.
Grüße

mosquito87 · 25. November 2012

Hallo Standar(D!),

vielen Dank für den Vorschlag.
So sieht es richtig gut aus.
Das Layout soll für 2 Projekte verwendet werden.
Ersteres wird demnächst realisiert, aber nur einem engen Benutzerkreis zugänglich gemacht, so dass wir dort sicherstellen können, dass alle Nutzer einen "neueren" Browser verwenden.
Letzteres wird ein langfristiges Projekt, daher scheint der Einsatz deiner Technik hier auch ok zu sein.

@Crizzo: Danke. Hatte Faux Columns bereits in einem anderen Projekt verwendet. Empfand das aber eher als "Bastlerlösung", mein Design war dann auch nicht in allen Browsern kompatibel, hatte u. a. Probleme auf Mobilgeräten.

@Daaron: Momentan wird nur das 960grid verwendet, da schön leichtgewichtig. YAML bietet mehr Funktionen und ist komplexer. Wäre mein Layout damit "einfach" zu verwirklichen? Wie schätzt du den Einarbeitungsaufwand?

Gruß

Suche

CSS Inneres div an vertikales Ende von äußerem div

mosquito87

Lieutenant

Batti

Ensign

Daaron

Fleet Admiral

ITserVice

Ensign

Crizzo

Redakteur Pro

mosquito87

Lieutenant

Crizzo

Redakteur Pro

Standar(D!)

Cadet 2nd Year

Daaron

Fleet Admiral

Standar(D!)

Cadet 2nd Year

mosquito87

Lieutenant