100% Höhe div zwischen Kopfzeile und Fußzeile

Question

Ich versuche, ein Webpage-Layout mit einer Kopf-/Fußzeile (100% Breite, 145px Höhe), ein "Hauptbereich" zwischen der Kopf-/Fußzeile (100% Breite, dynamische Höhe), und ein Container um den Inhalt, der eine einzigartige Hintergrundfarbe hat (860px Breite, dynamische Höhe, aber immer 'flush' gegen die Fußzeile).

(See Example for a visual)

Das Problem, das ich habe, ist, ich kann nicht den ‚Inhalt Container‘ zu haben scheinen immer mit der Fußzeile bündig sein, wenn es minimal Inhalt ist. Wenn Sie ein Setup wie das (original example) verwenden, wird die Fußzeile über den Inhalt verschoben, wenn eine respektable/"normale" Menge an Inhalt vorhanden ist oder wenn die Größe des Fensters geändert wird.

Und das folgende CSS führt zu einer Lücke zwischen dem Inhalt und der Fußzeile.

html,body{ 
    margin:0; 
    padding:0; 
    height:100%; 
    background:yellow; 
} 

.wrap{ 
    min-height:100%; 
    position:relative; 
} 

header{ 
    background:blue; 
    padding:10px; 
} 

#content{ 
    height:100%; 
    width: 400px; 
    margin:0 auto; 
    background:orange; 
    padding:30px; 
} 
footer{ 
    background:blue; 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; 
} 

Wie kann ich den Inhalt Behälter die volle Höhe des Bildschirms, wenn Inhalt minimal ist und haben die Fußzeile ‚Stock‘ auf den unteren Rand der Seite, aber auch dynamisch sein angemessen, um die Größe, wenn es eine ist Normale Menge an Inhalt (Fußzeile ist immer am Ende des Inhalts)?

Vielen Dank!

Answer 1

Ich glaube, Sie brauchen Position: in der Fußzeile festgelegt:

footer { 
    width: 100%; 
    height: 30px; 
    position:fixed; 
    bottom:0; 
} 

Answer 2

FIDDLE: http://jsfiddle.net/3R6TZ/2/

Fiddle Ausgang: http://fiddle.jshell.net/3R6TZ/2/show/

CSS

html, body { 
    height: 100%; 
    margin:0; 
} 
body { 
    background:yellow; 
} 
#wrapper { 
    position: relative; 
    min-height: 100%; 
    vertical-align:bottom; 
    margin:0 auto; 
    height:100%; 
} 
#header { 
    width: 100%; 
    height: 150px; 
    background:blue; 
    position:absolute; 
    left:0; 
    top:0; 
} 
#content { 
    background:pink; 
    width:400px; 
    margin:0 auto -30px; 
    min-height:100%; 
    height:auto !important; 
    height:100%; 
} 
#content-spacer-top { 
    height:150px; 
} 
#content-spacer-bottom { 
    height:30px; 
} 
#divFooter { 
    width:100%; 
    height: 30px; 
    background:blue; 
} 

HTML

<div id="wrapper"> 
    <div id="header">Header</div> 
    <div id="content"> 
     <div id="content-spacer-top"></div> 
     <div id="content-inner"> 
      **Content Goes Here** 
     </div> 
     <div id="content-spacer-bottom"></div> 
    </div> 
    <div id="divFooter">Footer</div> 
</div> 

UPDATE

Die #content-spacer-top und #content-spacer-bottom sind Pad die #content div verwendet werden, ohne Polsterung oder Marge zu verwenden, die die Kastengröße über die 100% Höhe verursacht Probleme erhöhen würde.

In CSS3 gibt es die box-sizing -Eigenschaft (more info here), die dieses Problem beheben kann, aber ich nehme an, Sie möchten nicht auf CSS3-Funktionen abhängen.

EDIT

Added ein fix und getestet, um IE7 unten

UPDATE 2

Alternative Verfahren unter Verwendung von :before und :after pseudo-Elemente anstelle des Spacers divs: http://jsfiddle.net/gBr58/1/

Funktioniert nicht in IE7 oder 6 t Hough, und in IE8 zu arbeiten, ein <!DOCTYPE> muss (nach w3schools.com) deklariert werden, aber die HTML ist schön und sauber

UPDATE 3 (Sorry für so viele Updates)

es aktualisiert sich an die Arbeit zu IE6. Ich störe normalerweise nicht, da meine Firma IE6 nicht unterstützt, aber es war eine einfache Reparatur ...