✔ Layout Problem

[U-Wasser-Gehaeuse]

Hallo
Ich habe ein Layout das mir ein wenig Kopfschmerzen bereitet.
Hier eine Skizze
Der Footer ist absolut unten positioniert.
Die Subnav floatet links, der Content hat links einen Margin um sich nicht mit der Subnav zu überschneiden.
Solange der Inhalt länger als die Subnav ist, oder nichts von beiden bis ans ende des Bildschirms geht ist es kein Problem, der Footer bleibt immer ganz unten und gut ist.
Wenn die Subnav aber länger als der Inhalt ist und der Bildschirm nicht hoch genug für die Subnav ist, sieht es so aus.

Meine Frage nun, kann mir jemand eine Lösung mitteilen wie man den Footer immer an den unteren Rand platziert und das er bei einem längeren Inhalt/Subnav mitgeht?

Ich bin bisher nur soweit gekommen das er sich unter das jeweils längste Element hängt und nicht Fix an der unteren Bildschirmkante bleibt wenn nicht genug Inhalt/Subnav da ist.

 

[saimoto]

Hi,
so gehts super, Crossbrowser.
CSS

html { height: 100%; }
body {
 height: 100%;
 margin: 0;
 padding: 0;
}
#content {
  position: relative;
  min-height: 100%;
}
* html #content {
  height: 100%;
}
#footer {
  background:red;
  height: 50px;
  position: relative;
  margin-top: -50px;
}

HTML

<div id="content">Hier Content</div>
<div id="footer">Text des Footers</div>

Musst dir nur noch den head reinbauen.

Footer bleibt immer unten, auch wenn der Content kürzer ist als die Seite.

PS: nimm aber besser Conditional Comments anstatt des * - Hacks im CSS für den IE.

Gruß

 

[U-Wasser-Gehaeuse]

Danke, hat geklappt.