✔ Foot-Div - Scrollbalken

[schutzgeist]

Hallo,

ich hab noch ein letztes Problem mit einem Div das ich als Foot für eine Seite verwende.
Nachdem ich es nun endlich hinbekommen hab, dass es immer am unteren Seitenrand ist (was bei einer Seite mit mehr Inhalt in IE6 und FF auch funktioniert) hab ich jetzt noch folgendes Problemchen:
Bei Seiten die relativ wenig Inhalt haben [d.h. es wird eigentlich kein Scrollbalken benötigt) wird meine Seite automatisch um 22px (Höhe des Foot) verlängert und ich habe wieder einen Scrollbalken... s. Screen

Hier mal mein Code...

CSS:

/* CSS Document */
html, body { 
margin: 0;
padding: 0;
height: 100%; 
background: #EEE;
background-image: url(../bg.gif);
background-repeat: repeat-y; 
color: #000; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 10pt;
behavior: url(../csshover.htc); 
margin: 0 0 0 0;} /* WinIE behavior call */
#container {
position: relative;
min-height: 100%; /* Moderne Browser */
height: auto !important; /* Moderne Browser */
height: 100%; /* IE */
}
h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}
#head { position: relative; top: 0; background-color: #CCC; height: 161px; width: 796px;}
#sub { position: absolute; top: 161px; background-color: #666; width: 140px; height: 22px; border-bottom: 1px solid #CCC; left: 0px; border-right: 1px solid #CCC;}
#balken { position: absolute; top: 161px; background-color: #666; width: 140px; height: 22px; border-bottom: 1px solid #CCC; left: 0px; border-right: 1px solid #CCC; height: 100%}
#subnavi { position: absolute; top: 161px; background-color: #666; width: 655px; height: 22px; border-bottom: 1px solid #CCC; left: 141px;}
#pathway {position: relative; top: 23px; left: 141px; background-color: #fff; width: 624px; padding: 3px 10px 3px 20px; font-size: 8pt;}
#left {position: relative; background-color: #666; width: 140px; height: 250px;}
#content {position: relative; float: left; top: 23px; color: #000; background-color: #fff; padding: 5px 20px 40px 20px; width: 615px; }
[...]
#foot { position: relative; float: left; background-image: url(../foot.gif); background-repeat: repeat-y; background-color: #CCC; width: 786px; height: 18px; margin-top: 1px; text-align: right; font-size: 8pt; padding-right: 10px; padding-top: 4px;} 
[...]
.einleitung {font-weight: bold; padding-bottom: 8px; z-index: 1;}

HTML:

<div id="container">
<div id="head">
<div class="head3"></div>
<div class="head2"></div>
<div class="head1"></div>
<div class="baier"></div>
</div>
<div id="sub"></div>
<div id="subnavi"></div>
<div id="pathway">
Sie sind hier ...</div> 

<div id="nav">

</div>

<div id="content"> 

</div>
</div>
<div id="foot">div>

Ich hoff, es wird klar, was ich mit meinem Problem mein :suspekt:

Danke schonmal,
schutzgeist

 

[Maik]

Du könntest den Footer mit margin-top:-22px (height:18px + padding-top:4px) in den Viewport schieben.

 

[schutzgeist]

Im IE stimmt es jetzt... Im FF hab ich jetzt allerdings wieder einen Abstand von 22px.. diesesmal aber in die andere Richtung... :suspekt:

Die 'leereren Seiten' passen nun.. Hab ich mehr Inhalt krieg ich einen Abstand (s. Anhang)

 

[Quaese]

Hi,

realisiere den oberen Abstand des Elementes content mit margin-top anstatt der top-Eigenschaft.

Aus

#content{ top: 23px;}

wird

#content{ margin-top: 23px;}

Ciao
Quaese

 

[schutzgeist]

Danke für den Tipp.
Nach einiger Frimelei am Padding scheint das ganze jetzt auch zu passen