[Erledigt] div soll Resthöhe einnehmen

[Forumsgast]

Hallo liebe Gemeinde,

ich bin langsam echt am verzweifeln. Seit Tagen versuche ich alles an Lösungen, was mir einfällt oder aus dem Internet zu holen ist. Nichts funktioniert, vermutlich weil ich entweder zu blöd bin oder arg auf dem Schlauch stehe.

Nun, vielleicht kann mir hier jemand helfen und mich jubeln lassen

Der Aufbau der Seite soll wie folgt aussehen:
unten ein Footer über die ganze Bildschirmbreite,
links eine Sidebar, die von ganz oben bis zum Footer gehen soll,
und der Rest soll Content werden, der auch von oben bis zum Footer gehen soll.

Ich hab das auch schon relativ gut geschafft, allerdings schaffe ich es nicht, dass die divs für die Sidebar und den Content die "Resthöhe" des Bildschirms einnehmen. Sie nehmen nur den platz ein, den sie für den content benötigen.

Sämtliche Angaben, die ich bisher probiert hab, brachten nichts.

Hier mal die CSS-Angaben:

* {
        margin: 0;
        padding: 0;
}
html {
        height: 100%;
}
body {
        font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
        height: 100%;
}
a {
        color: blue;
        outline: none;
        text-decoration: underline;
}
a:hover {
        text-decoration: none;
}
p {
        margin: 0 0 18px
}
img {
        border: none;
}
input {
        vertical-align: middle;
}
#wrapper {
        width: 100%;
        min-width: 1000px;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        overflow: hidden;
}


/* Header
-----------------------------------------------------------------------------*/
#header {
        height: 50px;
        background: #F1F8E0;
}


/* Middle
-----------------------------------------------------------------------------*/
#middle {
        width: 100%;
        padding: 0 0 274px;
        height: 1%;
        position: relative;
}
#middle:after {
        content: '.';
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
}
#container {
        width: 100%;
        float: left;
        overflow: hidden;
}
#content {
        padding: 0 0 0 247px;
        background: #F1F8E0;
}


/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
        float: left;
        width: 227px;
        margin-left: -100%;
        background-image:url(wiese3.jpg);
        background-repeat: repeat-y;
}


/* Footer
-----------------------------------------------------------------------------*/
#footer {
        margin: -274px auto 0;
        min-width: 1000px;
        height: 274px;
        background-image:url(wiese.jpg);
        background-repeat: repeat-x;
        position: relative;
}

Ich bitte euch um diese eine Antwort: Wie bekomm ich content und sideLeft auf die volle Resthöhe?

Vielen Dank für jede erbrachte und angedachte Mühe!

Liebe Grüße,
Dude

[Forumsgast]

faux columns. Blöcke nehmen nie maximal Höhe ein. Sondern nur so viel, wie der enthaltene Content gebietet.

[Forumsgast]

Schon mal vielen Dank für diese schnelle und hilfreiche Antwort. So kann ich es versuchen.

Eine Frage noch: Müsste die sideLeft aber nicht eh bis runter gehen, durch diese Angaben?

#sideLeft 
{        
float: left;        
width: 227px;         
margin-left: -100%;         
background-image:url(wiese3.jpg);         
background-repeat: repeat-y; 
}

EDIT: Hab's kapiert, hat sich erledigt. Danke

[Forumsgast]

display:table-cell nutzen und inline-table wrappen, das geht schon wenn man will.

[Forumsgast]

Dann muss aber immer noch eine Seite die Höhe "aufdrücken", oder?

[Forumsgast]

höhe brauch nicht festgelegt werden nein, je nachdem welcher block grad mehr platz brauch erweitert er alle anderen "Zellen". Tabellen-Verhalten halt ( ohne tabellen zu nutzen ).

[Forumsgast]

Ich rede aber von der Gesamthöhe. Darum geht es ja bei diesem Problem.

unten ein Footer über die ganze Bildschirmbreite,
links eine Sidebar, die von ganz oben bis zum Footer gehen soll,
und der Rest soll Content werden, der auch von oben bis zum Footer gehen soll.

[Forumsgast]

http://jsfiddle.net/tr0y/hPh3z/

[Forumsgast]

Funktioniert doch aber nicht. Gesamthöhe und Footerposition werden doch einzig von der Höhe der AnotherBigBox bestimmt.

[Forumsgast]

Funktioniert doch aber nicht. Gesamthöhe und Footerposition werden doch einzig von der Höhe der AnotherBigBox bestimmt.

http://jsfiddle.net/tr0y/2VB5h/

Ja, sorry, hatte ich missverstanden / missinterpretiert.

[Forumsgast]

Nu ists komplett kaputt

[Forumsgast]

Nu ists komplett kaputt

Na, kaputt nicht, aber ( was ich nicht getestet habe ) war die div-tabelle in der div-tabelle, manche browser ( fast alle ? ) haben was gegen relative-absolute positionierung

Mal schauen ob man das cross-browser technisch gelöst bekommt.

Edit: Interessant, Firefox bricht aus dem relative aus und nutzt als absolute-"Host" body, IE juckt die höhenangabe der inneren Tabelle ( 100% ) nicht, da die Box "undefiniert" groß ist...