Podział wysokości 100% między nagłówkiem i stopką

Question

Próbuję utworzyć układ strony z nagłówkiem/stopką (szerokość 100%, wysokość 145 pikseli), "głównym obszarem" między nagłówkiem/stopką (szerokość 100%, wysokość dynamiczna) i kontener wokół treści, która jest unikalnym kolorem tła (szerokość 860 pikseli, wysokość dynamiczna, ale zawsze jest "wyrównana" względem stopki).

(See Example for a visual)

Problem mam to nie wydaje się mieć „content” pojemnik zawsze znajdować się na równi ze stopki, gdy istnieje minimalna zawartość. Użycie konfiguracji, takiej jak () powoduje, że stopka unosi się nad treścią, jeśli istnieje szacunkowa/"normalna" zawartość lub rozmiar okna.

Następujący arkusz CSS powoduje powstanie luki między zawartością a stopką.

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; 
} 

Jak mogę sprawić, że pojemnik zawartość być pełnej wysokości ekranu, gdy treść jest minimalne i mieć stopce „kija” na dole strony, a jednocześnie dynamiczną zmianę rozmiaru odpowiednio, jeśli istnieje normalna ilość treści (stopka jest zawsze na dole treści)?

Dziękujemy!

Answer 1

myślę, że trzeba position: fixed w stopce:

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

Answer 2

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

Fiddle wyjściowa: 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

#content-spacer-top i #content-spacer-bottom służą do pad div #content bez użycia wyściółkę lub margines, który zwiększa rozmiar skrzynki obok wysokości 100%, powodując problemy.

W CSS3 istnieje właściwość box-sizing (more info here), która może naprawić ten problem, ale zakładam, że nie chcesz polegać na funkcjach CSS3.

EDIT

dodaje się naprawić i testowano do IE7

UPDATE 2

Alternatywna metoda z użyciem :before i :after pseudo elementy zamiast DIV dystansowych: http://jsfiddle.net/gBr58/1/

Nie działa w IE7 lub 6 t Hough i pracować w IE8, A <!DOCTYPE> muszą być deklarowane (według w3schools.com), ale HTML jest ładny i czysty

UPDATE 3 (przepraszam za tak wiele aktualizacji)

Updated go do pracy w dół do IE6. Zazwyczaj nie przeszkadza mi to, że moja firma nie obsługuje IE6, ale była to łatwa łatwa ...