✔ Footer nicht immer ganz unten am Browserrand?

[blizz-faad]

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:

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:

<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>

 

[Maik]

Moin.

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

 

[Maik]

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

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