div height 100% Problem

skinner13 · 10.08.2010

Hallo liebe Community,

ich habe mal wieder ein kleines Problemchen. Im allg. möchte ich meine Seite auf 100% bringen, also das kein Scrollbalken vorhanden ist. Mein Seitenaufbau erfolgt mit div Boxen. Nun ist mein Problem, dass mein Content Bereich (left und right) nicht auf die gesamte Höhe der Seite gezogen wird (siehe Bild).

Nun noch mein css dazu.

Code:

html, body, form{
    background-color:#FAF8F8;
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;}

#center{
    background-color:#FAF8F8;
    text-align:left;
    margin:0 auto;
    min-height:100%;
    height:auto !important;
    width:971px;
    height:100%;
    overflow:hidden !important;}

#header{
    float:left;
    width:100%;
    height:116px;}

#logo{
    background-image:url(images/logo.png);
    float:left;
    width:113px;
    height:116px;}
    
#welcome{
    background-image:url(images/welcome.png);
    height:116px;
    width:570px;
    float:left;}

#bild{
    background-image:url(images/support.png);
    height:116px;
    width:288px;
    float:left;}

#navi_top{
    float:left;
    background-color:#999;
    width:100%;
    height:6,51%;
    min-height:41px;}

#left {
    float:left;
    background-color:#FAF8F8;
    min-height:100%;
    max-height:69,4%;
    height:auto !important;
    width:195px;
    height:100%;
    overflow:hidden !important;
    padding-left:5px;}  

#right{
    border:1px solid #076A8C;
    float:left;
    width:764px;
    height:auto;
    min-height:100%;
    overflow:hidden !important;
    height:auto !important;
    padding-left:5px;
    margin-bottom: -62px;
    height: 100%;} 

#footer{
    background-image:url(images/footer_repeat.png);
    background-repeat:repeat-x;
    clear:both;
    float:left;
    min-height:62px;
    max-height:62px;
    width:100%;
    position:absolute;
    bottom: 0px;
    margin:0px;
    left:0px;
}

HTML:

  <div id="center">
    <div id="header">
      <div id="logo"></div>
      <div id="welcome"></div>
      <div id="bild"></div>
    </div>
    
    <div id="navi_top"></div>
    <div id="left"></div>    
    <div id="right"></div>    
     <div id="footer"></div>
  </div>

Ich habe schon einiges versucht aber nichts hinbekommen. Kann mir bitte einer weiterhelfen

Ladyan · 10.08.2010

AW: div height 100% Problem

So wie ich das sehe, machen deine divs left und right genau das was sie sollen.
Sie nehmen 100% der Größe des Inhalts(!) an.

Wir hatten gerade schonmal sowas... ich schau mal ob ich den Thread finde

Edit: Tadaa... Sticky Footer
So erreichst du zwar nicht, dass deine Inhalts-Divs bis unten gehen, aber dass der Footer unten bleibt und es so aussieht.

hubspe · 10.08.2010

AW: div height 100% Problem

Hi,

für gleichlange Spalten gibt es Faux Columns, bzw Faux Columns Liquid für Prozentbreiten.

Wofür brauchst du eigentlich dauernd dieses overflow:hidden;.
Das für html, body zu verwenden ist imho Blödsinn hoch fünf.

Weißt du überhaupt was diese Eigenschaft genau macht bzw. erzeugt??

skinner13 · 10.08.2010

AW: div height 100% Problem

Erstmal Danke für eure Antworten.

@hubspe
Klar weis ich wofür das overflow hidden steht. Es schneidet Content der größer als die Abmessungen ist einfach ab. Dies hat im body zumindest bewirkt, dass keine Scrollleiste mehr vorhanden war. Das steht jetzt überall weil ich rumexperimentiert habe

Ich verbesser jetzt mal das CSS und schau mal wie es dann aussieht.

@Ladyan
Der Footer soll ganz unten immer zusehen sein das stimmt, bringt mich jedoch mit meinen div left und right nicht weiter.

Kann es sein das sich position absolute und relative im FF und im IE unterschiedlich verhalten??

MFG

hubspe · 10.08.2010

AW: div height 100% Problem

skinner13 schrieb:
@hubspe
Klar weis ich wofür das overflow hidden steht. Es schneidet Content der größer als die Abmessungen ist einfach ab. Dies hat im body zumindest bewirkt, dass keine Scrollleiste mehr vorhanden war.

aha, du weißt es also nicht, außer das es was abschneidet.
overflow-hidden generiert einen Block Formatting Context.
Es verändert u.U. die Stapelreihenfolge und kann in verschiedenen Browsern zu ganz überraschenden optischen Ergebnissen führen.
Das liegt daran weil das in der Spezifikation nicht eindeutig definiert ist.

Der Scrollbalken für body ist erschienen weil du dein Layout suboptimal umgesetzt hast.

Ladyan · 10.08.2010

AW: div height 100% Problem

skinner13 schrieb:
@Ladyan
Der Footer soll ganz unten immer zusehen sein das stimmt, bringt mich jedoch mit meinen div left und right nicht weiter.

Indirekt schon, da es dir eine Lösungsmöglichkeit bietet.
Wie schon oben geschrieben - wenn du den divs keine width und height angibst sondern nur 100%, dann werden sie immer genau so groß sein, wie der Inhalt in ihnen.

skinner13 · 11.08.2010

AW: div height 100% Problem

So da bin Ich wieder

als erstes möchte ich noch etwas über overflow sagen. Ich habe mich nochmals ein bisschen belesen und bin der Meinung das ich es verstanden hatte

Klaro war meine Beschreibung nicht die beste aber die Auswirkungen sind mir bewusst.

@Ladyan
ich habe jetzt nochmals ein Layout erstellt. Die Umsetzung des Sticky Footer erfolgte problemlos. Wenn mein Content sich vergrößert und über die Bildschirmhöhe geht, klebt der Footer immer unterhalb des Contents..... so wie er es soll. Und wenn er kleiner als die Bildsschirmhöhe ist, klebt er immer am bottom. (siehe Bild)

Mein Problem besteht jetzt nur darin, dass ich wie dem Header gerne einen repeat-x geben möchte. Also er soll sich über die ganze Monitorbreite ziehen. Wenn ich nun den footer div außerhalb des Center divs ziehe macht er mir dies auch, klebt dann aber nicht mehr unterhalb des Contents (sondern nur am bottom und bleibt stehen beim scrollen).

Hier mein CSS:

Code:

html, body{
    height:100%;
    margin:0;
    background-image:url(header_repeat.png);
    background-repeat:repeat-x;}

#center{
    text-align:left;
    margin:0px auto -70px;;
    height:auto !important;
    background-color:#093;
    min-height:100%;
    height:100%;
    width:1000px;
    position:relative;}

#header{
    background-color:#F00;
    min-height:110px;
    max-height:110px;
    height:14.32%;
    width:100%;}
    
#navi_top{
    background-color:#0FF;
    min-height:50px;
    max-height:50px;
    height:6.51%;
    width:100%;}
    
#placeholder{
    background-color:#FF0;
    height:5px;
    width:100%;
    float:left;}
    
#content{
    background-color:#96C;
    height:100%;
    min-height:100%;
    height:auto !important;
    width:100%;
    float:left;}    

#footer{
    background-color:#FC0;
    position:absolute;
    bottom:0px !important;
    left:0;
    width:100%;
    height:70px;
    margin:0px auto;}
    
#min_height{
    height:70px;
    clear:both;}

Mein html

HTML:

<body style="text-align:center">
    <div id="center">
        <div id="header"></div>
        <div id="navi_top"></div>
        <div id="placeholder"></div>
        <div id="content"></div>
        <div id="min_height"></div>
        <div id="footer"></div>
    </div>

Kann mir einer damit bitte helfen?

aemkey · 11.08.2010

AW: div height 100% Problem

Dann pack den Header und den Footer in einen Container (in deinem Beispiel den Center) dem du width 100% gibts.
Dann dem Content einfach die feste Breite zuweisen und schon gehen Header und Footer über die ganze Seite.

Ladyan · 11.08.2010

AW: div height 100% Problem

Du hast die Regeln für den Einbau des Sticky Footers ja überhaupt nicht beachtet, wie soll das denn da funktionieren?
Ich kann weder die korrekte HTML-Verschachtelung, noch den korrekt eingefügten CSS-Code entdecken.
Gerne schaue ich mir das noch mal in Ruhe an; so wie ich das sehe könntest du dein CSS sowieso mal von Grund auf erneuern.
min-height: 110px;
max-height: 110px;?
wieso nicht einfach height:110px;? usw.

Edit:
So, ich hab deinen Code mal ausgemistet.

Der HTML-Teil nach Stick-Footer Vorgaben:

Code:

    <body>
        <div id="header"></div>
        <div id="center">
            <div id="navi_top"></div>
            <div id="placeholder"></div>
            <div id="content"></div>
        </div>    
        <div id="footer"></div>
    </body>

Und der CSS-Part:

Code:

* {margin:0; padding:0;}

html, body, #center {
    height:100%;}
    
body > #center {
    height: auto;
    min-height: 100%;}    

#header{
    background-color:#F00;
    height:110px;}
    
#center{
    text-align:left;
    margin:0 auto;
    background-color:#093;
    width:1000px;}
    
#navi_top{
    background-color:#0FF;
    height:50px;}
    
#placeholder{
    background-color:#FF0;
    height:5px;}
    
#content{
    background-color:#96C;
    padding-bottom: 70px;}
    
#footer{
    background-color:#FC0;
    position:relative;
    margin-top: -70px;;
    height:70px;}

Das ist einfach nur den Vorgaben nachempfunden und funktioniert einwandfrei.
Sogar schon ohne den Clearfix!
Also bitte einfach mal lesen

Nicht sagen "habe ich eingefügt" wenn dus dir nicht angeschaut hast.

Lg

skinner13 · 11.08.2010

AW: div height 100% Problem

Wenn du mir verraten würdest was bei meinem Quelltext falsch ist bzw. was zu Fehlern geraten könnte würde ich mich freuen. Ich muss doch nicht nach einem bestimmten Beispiel arbeiten was du mir gegeben hast, oder? Ich denke mal wenn das in allen Browsern bei mir funktioniert wird schon etwas richtig dran sein.

Es geht ja nicht um die Höhenangeben, ob jetzt min oder max.Hier geht es um den Content und Footer. Mir ist schon bewusst das die Höhenangaben so nicht stehen bleiben können. Sauber geschrieben wird später.....

Nun sieht es bei mir so aus und es Funktioniert alles so wie es soll. Getestet in FF, IE, Safari und Google Chrome.

HTML:

<body>
    <div id="center">
        <div id="header"></div>
        <div id="navi_top"></div>
        <div id="placeholder"></div>
        <div id="content"></div>
       <div id="min_height"></div>
    </div>   
    <div id="footer"></div>

</body>

Code:

html, body{
    text-align:center;
    height:100%;
    margin:0;
    background-image:url(images/header_repeat.png);
    background-repeat:repeat-x;}

#center{
    text-align:left;
    margin:0px auto -62px;;
    height:auto !important;
    background-color:#093;
    min-height:100%;
    height:100%;
    width:971px;
    position:relative;}

#header{
    background-color:#F00;
    height:116px;
    width:100%;}
    
#navi_top{
    background-color:#0FF;
    height:41px;
    width:100%;}
    
#placeholder{
    background-color:#FF0;
    height:5px;
    width:100%;
    float:left;}
    
#content{
    background-color:#96C;
    height:100%;
    min-height:400px;;
    height:auto !important;
    width:100%;
    float:left;}    
    
#footer{
    background-image:url(images/footer_repeat.png);
    margin:0px auto;
    position:relative;
    left:0;
    bottom:0px !important;
    background-repeat:repeat-x;
    height:62px;}
    
#min_height{
    height:70px;
    clear:both;}

Oh zu spät geschrieben..

Trotzdem danke für die Mühen. Verbesserungen nehme ich gerne an.

hubspe · 11.08.2010

AW: div height 100% Problem

skinner13 schrieb:
Ich muss doch nicht nach einem bestimmten Beispiel arbeiten was du mir gegeben hast, oder? Ich denke mal wenn das in allen Browsern bei mir funktioniert wird schon etwas richtig dran sein.

Aber du solltest die Technik die dahintersteckt verstehen, damit du sie auf dein Layout übertragen kannst.
An deinem Code sehe ich das du offensichtlich nichts kapiert hast. :rolleyes:

Hast du die Links für den Sticky Footer und für Faux Columns (liquid) überhaupt mal angeschaut und durchgearbeitet, um die Techniken zu verstehen?

skinner13 · 11.08.2010

AW: div height 100% Problem

Boah, natürlich habe ich das gemacht. Sag mir einfach was an meinem falsch sein bzw. nicht funktionieren soll.

Viele Wege führen nach Rom.....

Ladyan · 11.08.2010

AW: div height 100% Problem

Natürlich muss man nicht 1:1 alle Vorgaben übernehmen. Aber gerade bei so einem Thema wie dem Sticky Footer ist es nicht schlecht, auf bewährte Methoden zurückzugreifen. Dieses Beispiel ist in 50(!) Browsern getestet worden, da muss schon was dran sein

Der Grundgedanke des Sticky Footers ist, body auf 100% zu bringen. Deshalb darf für obere/untere Abstände kein margin verwendet werden.
Dein margin-bottom für #center habe ich deshalb durch padding-bottom ersetzt.
mit margin-top MINUS Footerhöhe rutscht der Footer somit in den Paddingbereich von #center.

Außerdem habe ich die Positionierung deines Footers von absolute zu relative geändert und die fehhlende Definition für body > #center hinzugefügt.

Dann noch die richtige Position in der Hierarchie - nämlich außerhalb von #center, und schon liefs.

Zum Thema "sauber geschrieben wird später" - mag sein, dass du damit am besten fährst. Aber du hast zt 5-fach die gleiche Definition drin, und überschreibst Werte redundant oder sogar gegenläufig, so dass du bei so einer simplen Verschachtelung schon mit !important arbeiten musst um dich selbst zu überschreiben - wenn da irgendwas nicht funktioniert muss das nicht zwingend ein grundlegendes Problem sein. Es kann auch einfach sein, dass verschiedene Eigenschaften miteinander im Konflikt stehen. Deshalb würde ich bei so etwas als allererstes meinen Code aufräumen, und mir erst dann, wenn es immer noch fehlerbehaftet ist, Hilfe suchen.
u know what I mean?

skinner13 · 11.08.2010

AW: div height 100% Problem

Endlich mal eine Antwort wie man sie erwartet. Ich habe meinen Code jetzt noch ein bisschen angepasst und bereinigt. Funktioniert soweit alles.

bzgl. des "sauber geschrieben wird später" hast du natürlich recht. Ich hab halt so eine blöde Angewohnheit wenn was nicht funktioiert meinen Code zu "verhunzen"

Vielen Dank an alle für die Bemühungen.