CSS: DIV Box die am ende einer Website angezeigt werden soll

[bulli]

Hi,

bei meiner Website soll am Ende ein footer abgezeigt werden, dass habe ich soweit auch schon geschafft, jedoch soll dieser, falls die Website kürzer wie das Browserfenster ist am unteren Ende des Anzeigefelds des Browserfenster sein.

Mein jetztiger Code:

#footer {
background-color : #fafafa;
height : 55px;
width : 100%;
font-size : 11px;
padding-bottom : 00px;
background-image : url(../images/footer.gif);
background-repeat : repeat-x;
}

Ist das mit CSS überhaupt möglich?

Gruß bulli

[Spezi]

Hi,

bei meiner Website soll am Ende ein footer abgezeigt werden, dass habe ich soweit auch schon geschafft, jedoch soll dieser, falls die Website kürzer wie das Browserfenster ist am unteren Ende des Anzeigefelds des Browserfenster sein.

Mein jetztiger Code:

#footer {
background-color : #fafafa;
height : 55px;
width : 100%;
font-size : 11px;
padding-bottom : 00px;
background-image : url(../images/footer.gif);
background-repeat : repeat-x;
}

Ist das mit CSS überhaupt möglich?

Gruß bulli

Musst Du in der "header.php" an der richtigen stelle setzen ! Dann funktioniert das.

[bulli]

Ne, funktioniert eben nicht, wenn die Seite nicht lang genug ist, wird es einfach nach dem Text eingefügt und nicht unten an das Ende vom Browserfenster.

[jpwfour]

also mit dem css-attribut "position" kann man das in etwa machen, jedenfalls mit position:absolute; könnte man den footer immer am unteren rand des browserfenster anzeigen lassen, auch wenn der inhalt "kleiner" ist.

nur würde dann auch bei größerem inahlt der footer immer dort angezeigt werden, also um dass mit css zu machen, muss man ziemlich tricksen, da fällt mir jetz gerade keine gute lösung ein, eventuell position:relative; und dass zum body tag, oder man packt den gesamten inhalt in einen div rein...

mit javascript wäre das natürlich weniger ein problem, nur dann muss man auch noscript usern eine schöne lösung anbieten.

[bulli]

hmm...ist schwierig, das mit dem javaScript ist eine gute Idee, da bin ich noch garnicht drauf gekommen, ich glaube es ist mit CSS garnicht möglich, da man so eine Art "WENN DANN" Funktion einfügen müsste.

jpwfour, wie könnte so der Javascript Code dafür aussehen, wenn der zu komplex ist oder zu lang wird, brauchst du es natürlich net machen, net das ich dann für dieses Kleine Problemchen noch 200 Zeilen JavaScript brauche ;)

[jpwfour]

noch eine option wäre:
position:fixed;
damit würde der footer immer am unteren rand angezeigt werden, und der rest der seiet scrollen, ohne dass sich der footer bewegt, so wäre er imemr zu sehen, egal ob der inhalt nun größer oder kleiner als das browserfenster ist.

mit javascript kenn ich mich da zuwenig aus, aber soviel code sollte das nicht sein.

EDIT:
so, hab nun doch noch was gefunden, wie man das nur per CSS erreichen kann:
min-height ist hierbei die lösung (wenn das ganze auch einer weiche für den ie bedarf)

dazu gibt es eingie beispiele:
http://forum.de.selfhtml.org/archiv/2007/11/t161189/
http://forum.de.selfhtml.org/archiv/2006/9/t137848/

aber sogar auch eines (das beste würde ich sogar sagen), ohne min-height:
http://tammofreese.de/assets/2005/12/31/min-height-4-ziel-erreicht.html

[bulli]

Vielen dank, ich habe zwar auch schon gegoogelt, jedoch nicht solche informativen Seite gefunden.

[Spezi]

Hier mal die Lösung
Man braucht das CSS nur an der richtigen stelle Positionieren in diesem Fall die "index.php". Und siehe da , es funktioniert.

Man könnte es auch ganz oben in die "footer.php" platzieren , wäre der gleiche effekt.



main.css


.footer {
position: relative;
background-image : url(../images/footer.jpg);
width: 649px;
height: 79px;
top: 10px;
}



index.php


<?
if (isset ($_GET['content']) && !empty ($_GET['content'])) {
if (strpos ($_GET['content'], '../') !== FALSE) die ('Zugriffsverletzung !');
if ($_GET['content']{0} != '/') $_GET['content'] = '/'.$_GET['content'];
}
require ( './lib/header.php' );
require ( './content'.$_GET['content'].'.php' ); ?>
<div class="footer"><div style="position: relative; top: 30px; color: #000000">Ich bin ein Footer</div></div>
<?
require ( './lib/footer.php' );
?>



Damit hält sich ein Footer immer unter der letzten Contentbox.

:smilewinkgrin:

Hier kannst Du dir es anschauen.
http://spezi.vms1.de/freevms2 (http://spezi.vms1.de/freevms2)