100% Höhe greift nicht

[Sebastian]

Guten Morgen!

Ich verzweifel gerade an einem Standard-Layout.
Und zwar soll sich der Kontainer mit dem Inhalt immer bis zum unteren Bildschirmrand ausdehnen, auch wenn der Inhalt weniger ist.

html und body haben eine Höhe von 100%, darin liegt der Kontainer "wrapper" mit einer Mindesthöhe von 100%. Der Kontainer macht so genau was er soll. Bei wenig Inhalt streckt sich die Höhe auf die Fenstergröße, bei viel Inhalt dehnt sich der Kontainer mit dem Inhalt aus.

Im "wrapper" liegen ein "header" und ein "maincontainer".
Der "maincontainer" hat eine Höhe von 100%, sollte sich also am "wrapper" orientieren und dessen Höhe annehmen. Tut er aber nicht.
Im "maincontainer" liegt ein "maincontent" mit einer Höhe von 100%, sollte sich also am "maincontainer" orientieren, der eigentlich die Höhe von "wrapper" haben sollte. Das will aber erst recht nicht klappen.

Könnte mir bitte jemand sagen wo mein Fehler liegt?
Zur Verdeutlichung, hat der Wrapper einen roten Rahmen bekommen.
Ich hoffe ich konnte euch mein Problem gut beschreiben.

Hier der Quelltext:
HTML:

<div id="wrapper">  
    <div id="header"><h1>Title</h1></div>  
    <div id="maincontainer">  
        <div id="maincontent">  
            <div class="standardContainer">  
                 <h3>Header</h3>  
                 <p>  
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt tempor enim, sit amet sagittis neque ullamcorper eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hendrerit sollicitudin est. Aliquam nec nibh dolor, id mattis lorem. Mauris dictum mollis dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.  
                 </p>  
             </div>  
             <div id="leftcontent">  
                 <div class="standardContainer">  
                    <h3>Header</h3>  
                    <p>  
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
                    </p>  
                </div>  
            </div>  
            <div id="content">  
                <div class="standardContainer">  
                    <h3>Header</h3>  
                    <p>  
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt tempor enim, sit amet sagittis neque ullamcorper eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hendrerit sollicitudin est. Aliquam nec nibh dolor, id mattis lorem. Mauris dictum mollis dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.  
                    </p>  
                </div>  
            </div>  
            <hr class="clearFloat" />  
        </div>  
    </div>  
</div>

CSS:

html {  
    height:100%;  
    margin:0;  
    padding:0;  
}  
body {  
    height:100%;  
    background:url(bg.jpg) top left repeat-x;  
    text-align:center;  
    margin:0;  
    padding:0;  
}  
#wrapper {  
    width:800px;  
    min-height:100%;  
    border:1px solid red;  
    text-align:left;  
    margin:0 auto;  
}  
#header {  
    background:url(hleft.jpg) top left no-repeat;  
    height:160px;  
}  
#header h1 {  
    margin:0 0 0 5px;  
    padding:50px 0 0 50px;  
    background:url(hright.jpg) top right no-repeat;  
    height:100%;  
}  
#maincontainer {  
    background:url(cleft.jpg) top left repeat-y;  
    /* greift nicht */  
    height:100%;  
}  
#maincontainer #maincontent {  
    height:100%;  
    margin-left:10px;  
    padding-right:10px;  
    background:url(cright.jpg) top right repeat-y;  
}  
.standardContainer {  
    margin-bottom:5px;  
    border-style:solid;  
    border-color:#7FD649;  
    border-width:1px;  
}  
.standardContainer h3 {  
    margin:0;  
    padding:0 0 0 5px;  
    border-bottom:1px solid #7FD649;  
    background:url(h3bg.jpg);  
    font-size:16px;  
}  
#leftcontent {  
    float:left;  
    width:200px;  
}  
#content {  
    margin-left:205px;  
}  
.clearFloat {  
    clear:both;  
    visibility:hidden;  
    margin:0;  
    padding:0;  
    width:0;  
    height:0;  
}

Danke für eure Hilfe!

Sebastian

[Felix Riesterer]

Lieber Sebastian,

ich stehe nicht so auf Div-Suppe. Wenn's Dir schmeckt...

Vielleicht kannst Du ja visuell die Illusion erzeugen, dass sich ein Element "bis unten hin" ausdehnt, indem Du clevere Hintergrundfarben (oder -bilder) benutzt.

Liebe Grüße,

Felix Riesterer.

[Sebastian]

Hallo Felix,

Vielleicht kannst Du ja visuell die Illusion erzeugen, dass sich ein Element "bis unten hin" ausdehnt, indem Du clevere Hintergrundfarben (oder -bilder) benutzt.

wie meinen? Genau das hab ich doch vor.
Deshalb hat #maincontainer auch background:url(cleft.jpg) top left repeat-y; und #maincontainer #maincontent background:url(cright.jpg) top right repeat-y;.

Nur das bringt mir ja nichts wenn ich die beiden Kontainer nicht auf 100% Höhe krieg.

Die von dir bezeichnete Div-Suppe dient zur Gruppierung von Elementen. Die sind natürlich nicht im Layout-Template zu finden.

Sebastian

[Felix Riesterer]

Lieber Sebastian,

Vielleicht kannst Du ja visuell die Illusion erzeugen, dass sich ein Element "bis unten hin" ausdehnt, indem Du clevere Hintergrundfarben (oder -bilder) benutzt.
[...]
Nur das bringt mir ja nichts wenn ich die beiden Kontainer nicht auf 100% Höhe krieg.

... und deren Elternelement hat welche background-Eigenschaft(en)...?

Liebe Grüße,

Felix Riesterer.

[Sebastian]

Nur das bringt mir ja nichts wenn ich die beiden Kontainer nicht auf 100% Höhe krieg.

... und deren Elternelement hat welche background-Eigenschaft(en)...?

Gar keine, weil es als Kontainer für den Header und den Content dient.
Der Header hat aber eigene Hintergrundbilder für den linken und rechten "Balken".
Deshalb kann ich die "Balken" auch nicht über die volle Höhe ziehen sondern muss dafür extra-Kontainer verwenden.

Sebastian

[Felix Riesterer]

Lieber Sebastian,

1.) #maincontainer oder #maincontent, denn mindestens eines der beiden ist überflüssig.
2.) Vergib diesem #main(container|content) ein passendes Hintergrundbild.

Noch Fragen?

Liebe Grüße,

Felix Riesterer.

[Sebastian]

Noch Fragen?

Ja. Ich habe #maincontainer entfernt und das Hintergrundbild dem #wrapper gegeben. Dieser hat ja min-height:100%.
Darin liegt nun also #maincontent (ohne #maincontainer drumrum) mit height:100%.
Der Kontainer geht trotzdem nicht bis zum unteren Ende (wo sein Elternelement aufhört), sondern endet am Ende des Inhalts.

Ich versteh es nicht. Das Elternelement ist nachweislich auf 100% (border:1px...), das Kind bleibt bei der 100%-Angabe aber nur auf Größe des Inhalts.

Sebastian

[Felix Riesterer]

Lieber Sebastian,

Der Kontainer geht trotzdem nicht bis zum unteren Ende (wo sein Elternelement aufhört), sondern endet am Ende des Inhalts.

in welchen Browsern beobachtest Du dieses Verhalten? Und an was sollten sich die 100% orientieren?

Liebe Grüße,

Felix Riesterer.

[Sebastian]

in welchen Browsern beobachtest Du dieses Verhalten? Und an was sollten sich die 100% orientieren?

Firefox 3.6.8, Opera 10.60 und... ach nee, Safari hab ich letztens deinstalliert^^

Die 100% sollen sich erstmal am Elternelement orientieren. Im Moment also an #wrapper.
Da gibts dann zwar später das nächste Problem, das #wrapper höher ist als #maincontent (wegen dem Header), aber ich dachte um das Problem kümmer ich mich wenn ich das erste gelöst habe.

Sebastian

[Sebastian]

Also der #wrapper hatte min-height:100%;, nicht wie auf dem Screenshot angegeben height:100%;.
Wenn ich dem #wrapper height:100% gebe, nimmt auch sein Kind, #maincontent, die Höhe an. Versteh ich zwar nicht, aber es klappt.

#maincontent auf 100% ist aber auch schlecht, weil der Header noch Platz beansprucht.
Ich dachte, ich könnte mit negativem margin-bottom die 'Überlänge' wieder abziehn. Das wird aber ignoriert.

Woran liegt das jetzt wieder?
Ich komm mir ziemlich blöd vor, weil ich grad an so einem einfachen Layout scheitere, sorry :(

Sebastian

[Sebastian]

Wenn ich dem #wrapper height:100% gebe[...]

... und der Inhalt länger wird, passt sich die Höhe der Balken links und rechts nicht dem Inhalt an. -.-

Ich komm mir ziemlich blöd vor, weil ich grad an so einem einfachen Layout scheitere, sorry :(

Ja, ich bin jetzt doch ziemlich verzweifelt.
Ich gebs fast auf und lad mir irgendwo ein fertiges Tamplate runter :(

Sebastian

[Felix Riesterer]

Lieber Sebastian,

#wrapper hat doch eine feste Breite von 800px, oder nicht? Warum solltest Du dann den rechten Rand von einem Kindelement umsetzen lassen? Bei einer festen Breite kannst Du doch beide Ränder in der Hintergrundgrafik von #wrapper darstellen!

Liebe Grüße,

Felix Riesterer.

[Sebastian]

Bei einer festen Breite kannst Du doch beide Ränder in der Hintergrundgrafik von #wrapper darstellen!

Die Breite wird nicht ewig fest sein.

Sebastian

[Sebastian]

Ok, ich hab nochmal völlig neu angefangen um mich dem Problem mit etwas mehr Übersicht zu widmen.

html, body {  
    height:100%;  
    margin:0;  
    padding:0;  
}  
#wrapper {  
    /* geht */  
    min-height:100%;  
    height:auto;  
    width:800px;  
    text-align:left;  
    margin:0 auto;  
    border:1px solid red;  
}  
#content {  
    /* geht nicht! */  
    height:100%;  
    margin-left:10px;  
    padding-right:10px;  
    border:1px solid blue;  
}

<body>  
	<div id="wrapper">  
    	<div id="content">  
        </div>  
    </div>  
</body>

Es muss doch irgendwie möglich sein, die Kontainer auf eine Höhe zu kriegen?!
Und zwar auf 100% Fensterhöhe bei wenig Inhalt und wenn sich der Inhalt über die Fensterhöhe erstreckt auf "Inhalts-Höhe".

Danke für eure Hilfe!

Sebastian

[Beat]

#wrapper {
    /* geht */
    min-height:100%;
    height:auto;
    width:800px;
    text-align:left;
    margin:0 auto;
    border:1px solid red;
}

Es muss doch irgendwie möglich sein, die Kontainer auf eine Höhe zu kriegen?!
Und zwar auf 100% Fensterhöhe bei wenig Inhalt und wenn sich der Inhalt über die Fensterhöhe erstreckt auf "Inhalts-Höhe".

Du hast im Wrapper eine height:auto. Und das ist eben nicht 100%.

mfg Beat

[Sebastian]

Du hast im Wrapper eine height:auto. Und das ist eben nicht 100%.

Dann geben wir dem Wrapper doch mal 100% und erweitern den Inhalt über die Fensterhöhe hinaus. Schade, die Kontainer bleiben oben kleben. (FF 3.6.8)

Sebastian

[Beat]

Du hast im Wrapper eine height:auto. Und das ist eben nicht 100%.

Dann geben wir dem Wrapper doch mal 100% und erweitern den Inhalt über die Fensterhöhe hinaus. Schade, die Kontainer bleiben oben kleben. (FF 3.6.8)

Sebastian

Alles was du tun musst ist, dem html Element die Eigenschaft min-height:100% zu geben, so dass dies automatisch erweitern kann.
Aller Child-Elemente brauchen dann nur noch die height-Angabe.

mfg Beat

[Sebastian]

Alles was du tun musst ist, dem html Element die Eigenschaft min-height:100% zu geben, so dass dies automatisch erweitern kann.
Aller Child-Elemente brauchen dann nur noch die height-Angabe.

Falsch!
Das Kind ignoriert die min-height Angabe und bleibt auf auto wenn man ihm height:100% gibt und das Elternelement min-height:100% hat.

Ich hoffe ihr versteht mich nicht falsch, aber probiert eure Vorschläge doch bitte auch mal selbst aus. Irgendwie hab ich das Gefühl es dreht sich hier im Kreis.

Sebastian

[Sebastian]

Mein Fazit lautet, dass es nicht möglich ist einem Kindelement eine Höhe von 100% zu verpassen wenn dessen Elternelement eine Höhe von height:100% hat.
Unabhängig von dessen Elternelement und tatsächlicher Höhe.

Also wird eine Tabelle missbraucht werden müssen.

Danke, euer frustrierter Sebastian

[ChrisB]

Hi,

Mein Fazit lautet, dass es nicht möglich ist einem Kindelement eine Höhe von 100% zu verpassen wenn dessen Elternelement eine Höhe von height:100% hat.

Doch, gerade das ist möglich.

Unabhängig von dessen Elternelement und tatsächlicher Höhe.

Es müssen *alle* Vorfahrenelemente eine explizite height-Angabe haben.

Zwischendrin irgendwo nur eine Mindesthöhe anzugeben, funktioniert in der Praxis nicht.

MfG ChrisB