Unterer Bereich auf restlichen Bildschirm ausdehnen

Mein Problem lässt sich wohl auf „Wie schaffe ich es einen DIV-Container auf 100% zu bringen“ zurückführen. Trotzdem habe ich ein Problem und komme nicht weiter.

Ich habe folgenden HTML-Code:
[PHP]

oben
    <div id="menu" class="bg_2">
        <div class="offset">
        menu
        </div> <!-- offset -->
    </div> <!-- menu -->

    <div id="inhalt">
        <div class="offset">
        inhalt
        </div> <!-- offset -->
    </div> <!-- inhalt -->

    <div id="unten">
        <div class="offset bg_1">
        unten
        </div> <!-- offset -->
    </div> <!-- unten -->
 </div> <!--wrapper-->

[/PHP]Mein Ziel ist es, sozusagen 4 untereinander liegende Bereich zu schaffen, bei den ersten drei hängt die Größe vom Inhalt ab, der unterste soll bis zum Seitenende reichen. tut er aber nicht…

Meine CSS sieht wie folgt aus:

[PHP]

  • {
    margin: 0;
    padding: 0;
    }

html, body {
height:100%;
}

/* IDs */
#wrapper {
background: #B9B9B9 url(…/images/bg_wrapper.jpg) left top repeat-y;
min-height: 100%;
border: 5px solid green;
}

  • html #wrapper {
    height: 100%;

}

#oben{

}

#menu{

}

#inhalt{

}

#unten{
min-height: 101%;
border: 1px solid yellow;
}

/* Klassen */
.offset{
margin: 0 auto;
width: 960px;
border: 1px solid red;
}

.bg_1{
background: #B9B9B9 url(…/images/bg_wrapper_offset.jpg) left top repeat-y;
}

.bg_2{
background: #DDDDDD;
}
[/PHP]Der Wrapper scheint über den gesamten Bildschirm zu gehen, der grüne Rahmen scheint ok zu sein. Der Container mit der id=„unten“ (gelber Rahmen) sollte doch eigentlich den gesamten Wrapper ausfüllen oder…?

Wäre für alle Tipps dankbar!

PS: Das ganze ist noch nicht die endgültige Struktur, aber bevor ich das mit der Höhe nicht hinbekomme, brauch ich da garnicht weitermachen…

a) Willst du, dass der untere immer den restlichen Platz einnimmt?
Das wird problematisch bis m.E. unmöglich: Denn CSS kann nicht rechnen. Auch lassen sich Prozent- und Pixelangaben nicht auf einen Nenner bringen. Ferner ist zu berücksichtigen, dass die Viewporthöhe bei jedem Besucher anders sein kann.

b) Soll dagegen der unten-Div immer nur „unten“ angeordnet sein, ohne dass er eine noch vorhandene Resthöhe einnimmt, dann geht das damit: Footer immer unten anordnen

Genau das… fürchte aber auch, dass das kaum möglich ist… aber falls jemand eine Idee hat :mrgreen: