<div>-Problem

[pointxzero]

hallo,

nach 4 Stunden verzweifelten rumprobierens und lesen von unzähligen Forenbeiträgen, weiss ich jetzt wirklich nicht mehr weiter. Folgendes Problem:

Ich habe einen <div>-Container, mit height: 100% um es an der Browserhöhe auszurichten, in diesem Container sind 3 weitere <div>'s. Ein <div> mit der absoluten Höhe von 150px, ein <div>, mit diesen habe ich das Problem, und der dritte <div> mit einer fixen Höhe von 40px. Die <div>'s liegen alle untereinander im Container. Jetzt zu meinen Problem:

Gibt es eine Möglichkeit dass das mittlere <div> automatisch die Höhe annimmt die von der Containerhöhe/Browserhöhe noch übrig ist? Also theoretisch:
Containerhöhe minus 150px minus 40px = <div>-Höhe

Noch ein kleines Schaubild:

<div> - - - - - (Container, height: 100%)
     <div> - - - (height: 150px)
     <div> - - - (height: automatisch der Rest von der Containerhöhe)
     <div> - - - (height: 40px)
</div>

Ich hoffe mein Problem ist verständlich und mir kann irgendjemand helfen.

[suit]

Ich hoffe mein Problem ist verständlich und mir kann irgendjemand helfen.

http://rebell.at/temp/1050x1680_pivot_sticky_footer.png

falls dich der screenshot nicht abschreckt, kannst du gerne die adresszeile abtippen und das beispiel umsetzen

[pointxzero]

ok, schon einmal danke. Klappt soweit wunderbar.

Jetzt habe ich nur folgendes Problem. Mein Container und die darinsteckenden <div>s werden zentriert, und der Footer wird komplett links ausgerichtet. Wenn ich meinem <div>-Container aber die position(left 0, top 0) zuweise, verschwindet mein Footer wieder.

Wie kann ich meinen Container nun auch links ausrichten, ohne das mein Footer verschwindet?

[suit]

Wie kann ich meinen Container nun auch links ausrichten, ohne das mein Footer verschwindet?

indem du die dafür nötige eigenschaft (den margin-wert "auto" auf der linken und rechen seite) entfernst

[pointxzero]

Ah, funktioniert.

Dankeschön für die schnelle Hilfe.

[pointxzero]

ok, nächstes Problem...

Wenn ich jetzt für meinen Container padding einstelle, verzieht er mir wieder das ganze Gerüst, da er es eben auch auf den innenliegenden <div> anwendet. Besteht irg. die Möglichkeit dass das padding wirklich nur auf den Text angewendet der im Container steht, und von den anderen darinliegenden <div>s ignoriert wird?

[suit]

wie wärs mit einem padding (oder maring) für die entsprechenden elemente innen drinnen, wenn der text innen drinnen einen abstand haben soll?

ich kann dir übrigens nicht folgen, welchen container du menist

[pointxzero]

wie wärs mit einem padding (oder maring) für die entsprechenden elemente innen drinnen, wenn der text innen drinnen einen abstand haben soll?

ich kann dir übrigens nicht folgen, welchen container du menist

ok, anscheinend ist es doch so weit dass ich den Quelltext posten muss:

HTML:

<div class="container">
    <div class="divnavi">
     NAVI

</div><br />

Hier soll dann der Inhalt rein, der den Innenabstand haben soll.

<div class="push"></div>
</div>

<div class="divfooter">
     FOOTER
</div>

CSS:

html, body {
     height:100%;
     margin:0;
   }

.container {
  background-color:#CCFF00;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  overflow: auto;
  width: 700px;
  margin: 0 0 -20px 0;
  border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #000000;
  text-align: justify;
  padding-left: 5px;     <- Der Innenabstand wird eingehalten vom Text, aber natürlich hält dann auch der Navi-div den Innenabstand zum Container ein.
  padding-right: 5px;

}

.divnavi {
  height: 150px;
  background-color:#FF0000;

}

.divcontent {
  background-color:#CCFFFF;
  overflow: scroll;

}

.divfooter, #push {
  height: 20px;
  background-color:#66FF66;
  width: 700px;

}

[suit]

dann füge einen zusätzlichen container für deinen text ein oder korrigierte das problem mit deiner navigation durch negative aussenabstände bei der navigation

[Alex]

Containerhöhe minus 150px minus 40px = <div>-Höhe

Noch ein kleines Schaubild:

<div id="mainDiv"> - - - - - (Container, height: 100%)
     <div id="topDiv"> - - - (height: 150px)
     <div id="middleDiv"> - - - (height: automatisch der Rest von der Containerhöhe)
     <div id="bottomDiv"> - - - (height: 40px)
</div>

[...]
<body onLoad="init();">

  
function init()  
{  
 var winHeight = document.body.clientHeight;  
 var differenz = winHeight - ((document.getElementById("topDiv").style.height) + (document.getElementById("bottomDiv").style.height));  
 document.getElementById("middleDiv").style.height = differenz;  
}  

Nur mal so aus dem Kopf schnell geschrieben, aber das müsste dir die "richtige" Höhe deines Divs immer initialisieren, bei Laden der Seite,