Guten Abend,
habe ein kleines Problem mit meinem Footer. Eigentlich ist dieser immer unten am Browserrand, außer wenn der "content"-Bereich zu lang ist (height). Gut am anhängenden Screenshot zu sehen.

CSS-Datei:

PHP-Code:

html, body { margin: 0px; padding: 0px; height: 100%; background: #888888; font: 13px Trebuchet MS; color: #FFFFFF; }
html>body #container { height: auto; }
#container { position: relative; min-height: 100%; height: 100%; height: auto; }
#header_bg { position: absolute; width: 100%; height: 95px; background: #121A33; }
#header { position: absolute; padding: 5px; left: 50%; margin-left: -40%; width: 79%; min-width: 630px; height: 85px; background: #FF0000; }
#content_head { position: absolute; margin: 110px 0px 0px 0px; padding: 5px; left: 50%; margin-left: -40%; width: 79%; min-width: 630px; background: #121A33; }
#content { position: absolute; margin: 138px 50px 50px 50px; padding: 5px; left: 50%; margin-left: -40%; width: 79%; min-width: 630px; background: #4D515D; }
#footer_bg { position: absolute; width: 100%; height: 40px; background: #121A33; bottom: 0px; }
#footer { position: absolute; padding: 5px; left: 50%; margin-left: -40%; width: 79%; min-width: 630px; height: 30px; bottom: 0px; background: #FF0000; }

span.footer { font-size: 11px; color: #898D99; } 


Index-Datei:

PHP-Code:

<div id="container">
  <div id="header_bg">
    <div id="header">
      Header
    </div>
  </div>
  <div id="content_head">
    Startseite
  </div>
  <div id="content">
    test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test1<br />
  </div>
  <div id="footer_bg">
    <div id="footer">
      <span class="footer">Footer</span>
    </div>
  </div>
</div> 


Moin.

Zitat von blizz-faad

habe ein kleines Problem mit meinem Footer. Eigentlich ist dieser immer unten am Browserrand, außer wenn der "content"-Bereich zu lang ist (height).

Die Ursache ist die absolute Positionierung von #content, mit der der Block aus dem normalen Textfluß genommen wird.

Das ähnliche Problem hatten wir aber doch schon mal: Frage bezüglich Position

mfg Maik

Alternativumsetzung des Layouts ohne absolute Positionierungen (bis auf #footer), mit der der Footer nun bei zunehmenden Inhalt auch nach unten wandert:

Code :

1 2 3 4 5 6 7 8 9

html, body { margin: 0px; padding: 0px; height: 100%; background: #888888; font: 13px Trebuchet MS; color: #FFFFFF; } html>body #container { height: auto; } #container { position: relative; min-height: 100%; height: 100%; height: auto; } #header_bg {  width: 100%; height: 95px; background: #121A33; } #header {  padding: 5px; margin:0 auto; width: 79%; min-width: 630px; height: 85px; background: #FF0000; } #content_head {  padding: 5px;  margin:0 auto; width: 79%; min-width: 630px; background: #121A33; } #content {  padding: 5px 5px 40px 5px;  margin:0 auto; width: 79%; min-width: 630px; background: #4D515D; } #footer_bg { position: absolute; width: 100%; height: 40px; background: #121A33; bottom: 0px; } #footer { padding: 5px; margin:0 auto; width: 79%; min-width: 630px; height: 30px; background: #FF0000; }

mfg Maik