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 unter Wrapper
Zitieren
Sticky Footer funktioniert klasse!
Zitat von Schnippel
