Sticky Footer unter Wrapper
Nachdem ich mir jetzt quasi den ganzen Sonntag um die Ohren geschlagen habe um einen sticky footer (sollte 100% Seitenbreite haben) unter den wrapper zu hängen, versuch ich das ganze jetzt mal wiederzugeben falls es andere Interessenten gibt.
1.Schritt: Template editieren - Footer unter das Wrapper <div>
PHP-Code:
<header id="header">
<div class="inside">
<?php echo $this->header; ?>
</div>
</header>
<?php endif; ?>
<?php echo $this->getCustomSections('before'); ?>
<div id="container">
<?php if ($this->left): ?>
<aside id="left">
<div class="inside">
<?php echo $this->left; ?>
</div>
</aside>
<?php endif; ?>
<?php if ($this->right): ?>
<aside id="right">
<div class="inside">
<?php echo $this->right; ?>
</div>
</aside>
<?php endif; ?>
<div id="main">
<div class="inside">
<?php echo $this->main; ?>
</div>
<?php echo $this->getCustomSections('main'); ?>
</div>
</div>
<?php echo $this->getCustomSections('after'); ?>
</div>
<?php if ($this->footer): ?>
<footer id="footer">
<div class="inside">
<?php echo $this->footer; ?>
</div>
</footer>
<?php endif; ?>
<div id="clear"></div> //hier war ich nicht sicher ob das clear über oder unter den footer teil kommt
2.Schritt: CSS anpassen:
Code:
html,
body
{
margin: 0;
padding: 0;
height: 100%;
}
body
{
height:100%;
min-height:100%;
}
header
{
width:960px;
height:150px;
}
#container
{
height:100%;
min-height:100%;
margin-top:10px;
margin-bottom:10px;
padding-bottom:100px;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
}
#main
{
}
#footer
{
width:100%;
height:100px;
background-color:rgba(142,202,31,0.33);
position: relative;
margin-top: -100px; /* Negativer Wert der Footer-Höhe */
height: 100px;
clear:both;
}
So hat das ganze jetzt bei mir funktioniert, Korrekturen und Anregungen erwünscht.
have fun
EDIT: kleiner Nachtrag, meistens soll ja dann im Footer trotzdem zentriert und auf Wrapper-Breite weiter gearbeitet werden, hierfür einfach das gewünschte Inhaltselement mit
Code:
width: 960px;
margin-right: auto; /* Abstand rechts */
margin-left: auto; /* Abstand links */
wieder in die gewünschte Position bringen.
Sticky Footer funktioniert klasse!
Danke für deine präzisen Angaben, das hat mir viel Zeit und Mühe gespart! Ich finde es super, dass du das hier teilst!!!
Herzliche Grüße!
Liste der Anhänge anzeigen (Anzahl: 2)
Häckchen ist drin bei " Footer am unteren Rand "
und so schauts aus:
Anhang 8520
Anhang 8521
Hier das CSS dazu:
/*=== Gestaltung des Fußbereiches ===*/
#footer {
position:relative;
height:89px;
}
#ips {
position:relative;
height:12px;
text-align:center;
font-size:9px;
margin-top:0px;
margin-bottom:7px;
}
#ips a {
color:#575759;
font-size:9px;
}
#ips a:hover {
color:#eb6b22;
}
#last {
height:89px;
}
#last_links {
background-image:url(layout_elemente/fussboden-jena.jpg);
background-repeat:repeat-x;
width:55%;
height:70px;
float:left;
}
#last_rechts {
background-image:url(layout_elemente/fussbodenaufbau-jena.jpg);
background-repeat:repeat-x;
float:right;
height:70px;
width:45%;
}
#last_rechts img {
margin-left:-2px;
}
und hier der HTML-Code
HTML-Code:
<div id="footer">
<div class="inside">
<div id="last">
<div id="ips">© 2012 Kunath Raumkonzept Stadtroda Jena Thüringen
• Webbetreuung, Webdesign & Layout by <a href="http://www.internet-projekt-service.de" title="Partner für Layout, Webdesign, Film-Produktion von Video-Trailer und Marketing im Internet">www.internet-projekt-service.de</a> • <a href="http://www.kunath-raumkonzept.de/impressum.html" title="Raumgestaltung in Jena">Impressum </a></div>
<div id="last_links"></div>
<div id="last_rechts"><img src="tl_files/layout_elemente/raumdesign.jpg" alt="raumdesign" title="Raumdesign in Thüringen, Jena, Erfurt, Weimar, Hermsdorf, Gera " /></div>
</div>
</div>
</div>
</div>
Liste der Anhänge anzeigen (Anzahl: 2)
Antwort zu folkfreund und pmmueller:
Habe beide Varinaten ausprobiert und beide Varianten funktioneren.
Hinweis zur Erweiterung semidynamic: die Höhe des Footer muß im BA / Seitenlayout beim eingestellt werden.
Ich hatte die Höhe im CSS, da funktionierte das nicht.
ABER
Bei beiden Varianten hab ich das Problem, daß bei einer leeren Seite der Footer nur dann zu sehen ist, wenn man scrollt:
Anhang 8524
wenn gescrollt, dann erst kommt Footer zum vorschein:
Anhang 8525
Bei genügend Inhalt der gescrollt werden muß ist das ja okay.
Aber ich möchte die Startseite so layouten, daß Header und Footer zu sehen sind, ohne daß man scrollen muß.
Wie läßt sich das realisieren?
Ein "min-heigt" wurde nicht vergeben.
Ich habe es auch mit
#footer { margin-top:-89px; } probiert, funktioniert auch nicht.
Gibt es dazu eine Lösung?
