Footer am und Content bis zum Browser Boden

[Asto]

Hallo Leute!

Ich hab hier ein kleines CSS Problem. Es geht darum den Footer am unteren Ende des Borwserfensters auszurichten und gleichzeitig dem Container für den Content zu erlauben den Footer bei bedarf weiter nach unten zu drücken.

Platziere ich den Footer einfach am Ende des Content-Containers, welcher mit "height:100%;" versehen ist, so bleibt unterhalb des Footers ein Freiraum. Wenn der Content-Container sich in seiner Höhe einfach über die Gesamte Seite ausbreiten würde, wäre mein Problem gelöst.

Platziere ich den Footer per "position:aboslute; left:0; bottom:0;" so schiebt Sich der Text-Container, welcher innerhalb des Content-Containers definiert ist, einfach unter dem Footer durch.

Definiere ich den Footer mit "position:absolute; left:0; top:100%;" so erscheint er irgendwo ganz tief unten im Nirvana des Scroll-Balkens. Das positive an der Sache allerdings ist, dass sich der Content-Containter dann bis ganz runter zum footer zieht :-)

Ein Bisschen Code falls ich zu undeutlich war:
[code=html]
<div id="mid_content">

<div id="top_right">
  <div id="header">
   <div id="navigation">
    <ul>
     <li id="start"><a href='http://www.licht-impulse.de/index.php?site=home'></a></li>
     <li id="stil5"><a href='http://www.licht-impulse.de/index.php?site=stil5'></a></li>
     <li id="produkte"><a href='http://www.licht-impulse.de/index.php?site=produkte'></a></li>
    </ul>
   </div>
  </div>
 </div>

<div id='text'>
  Text im Content-Container
 </div>

<div id='info_text'>
         Infobox mit Text ebenfalls im Content-Container
 </div>

</div>

<div id="bottom_right">
 <div id="footer">
  <ul>
   <li><a href="">AGBs</a></li>
   <li><a href="">Impressum</a></li>
   <li><a href="mailto:">Kontakt</a></li>
  </ul>
 </div>
</div>
[/code]

Bisschen CSS dazu (Variante wo unterhalb des Footers Platz ist bzw. der #mid_content height:100%; nicht versteht):

[code=css]
#mid_content {
 width:100%;
 height:100%;
 padding-bottom:140px;
 background:url(./gfx/mid_content.jpg) top left repeat-y;
}
#text {
 position:relative;
 top:50px; left:115px;

width:540px;
 padding:5px 5px 50px 5px;

color:white;
 background-color:#5d5f5e;
}
#info_text {
 position:absolute;
 /*top:130px; left:727px;*/
 top:130px; left:727px;

width:252px;
 padding:5px;
 color:white;
}
#bottom_right {
 position:relative;
 margin-left:0%;
 width:100%;
 height:34px;
 background:url(./gfx/bottom_right.jpg) bottom right repeat-x;
}
#footer {
 height:34px;
 background:url(./gfx/footer.jpg) bottom left no-repeat;
 overflow:hidden;
}
[/code]

So... ich hoffe es ist nur eine kleine Unachtsamkeit von mir und dass mir wer helfen kann der da durchblickt.

Vielen Dank im Voraus schon mal für eure Antworten!! :-)

MfG Asto.

[Asto]

Platziere ich den Footer per "position:aboslute; left:0; bottom:0;" so schiebt Sich der Text-Container, welcher innerhalb des Content-Containers definiert ist, einfach unter dem Footer durch.

Entschuldigung vielmals, ich meinte natürlich "position:relative; left:0; bottom:0;" !!

*rolleyes*

[Asto]

Platziere ich den Footer per "position:aboslute; left:0; bottom:0;" so schiebt Sich der Text-Container, welcher innerhalb des Content-Containers definiert ist, einfach unter dem Footer durch.

Entschuldigung vielmals, ich meinte natürlich "position:relative; left:0; bottom:0;" !!

*rolleyes*

Peinlich....

Vergesst meine Antwort auf die erste Antowrt. Ich wollte eigentlich diesen hier zitieren:

Definiere ich den Footer mit "position:absolute; left:0; top:100%;" so erscheint er irgendwo ganz tief unten im Nirvana des Scroll-Balkens. Das positive an der Sache allerdings ist, dass sich der Content-Containter dann bis ganz runter zum footer zieht :-)

Ich meinte hier: ""position:relative; left:0; top:100%;"

Ich sollte wohl das trinken in der Mittagspause besser aufgeben... :-s

[wahsaga]

hi,

Es geht darum den Footer am unteren Ende des Borwserfensters auszurichten und gleichzeitig dem Container für den Content zu erlauben den Footer bei bedarf weiter nach unten zu drücken.

http://alistapart.com/articles/footers sagt eigentlich alles, was dazu zu sagen ist.

gruß,
wahsaga

[Asto]

Re!

http://alistapart.com/articles/footers sagt eigentlich alles, was dazu zu sagen ist.

Wer die Seite nicht kennt ist klar im Nachteil, danke dafür!

Jetzt bleibt sich nur noch ein Problem: #mid_content versteht die height:100%; immer noch nicht.

[code=html]
html, body { height:100%; }
#mid_content {
 width:100%;
 height:100%;
        padding-bottom:50px;
        /*Die Grafik muss sich bis runter zum footer ziehen*/
 background:url(./gfx/mid_content.jpg) top left repeat-y;
}
#footer {
 position:absolute;
 left:0; bottom:0;
 width:100%;
 height:34px;
}
#text {
 position:relative;
 top:50px; left:115px;
}

<!-- dank diesem container ist der Viewport der Seite immer mindestens 100% un der Footer wandert beim morphen mit -->
<div style="position:relative; min-height:100%;">

<!-- #mid_content muss sich von ganz oben bis runter zum footer ziehen, tut er aber nicht :-( -->
  <div id="mid_content">
    <div id="header"></div>
    <div id="text"></div>
  </div>

<div id="footer"></div>
</div>
[/code]

So far, the height of the container is determined by the height of the content block, which is cool if there is enough content to fill the height of the browser window (also called the viewport). If this is not the case you want the footer to stick to the bottom of the browser window.

Okay, schön und gut. Was bringts mir aber wenn der Footer schön unten klebt, der Content aber nicht die 100% höhe des Viewports übernimmt sondern eben nur so hoch wie der #text Container ist? In meinm Fall nichts, denn das zerstört mein Layout.

Ich habe versucht #mid_content mit "position:absolute; bottom:0;" zu versehen, hat auch ganz toll funtkoiniert...
Schade nur, dass "absolutely positioned elements are taken out of the normal flow and are placed over normal flowed elements." und der #text bei überlänge somit unter dem Footer durchgeschoben wird.

Thx so far, Listapart ist wirklich spitzenklasse! :-)

Gruß, Asto.

[Asto]

Jetzt bleibt sich nur noch ein Problem: #mid_content versteht die height:100%; immer noch nicht.

Hehe.... Das ist ja auch garnicht nötig, wenn man die Hintergrundgrafik in dem Container mit min-height:100% definiert! :-D

Vor lauter Bäumen den Wald nicht mehr gesehen...

Gruß, Asto.