Footer immer unten (bei Nutzung des Mootools.Accordions)

[mille]

Liebe Forengemeinde,

nachdem ich jetzt eine Weile experimentiert und im Internet gesucht habe, muss ich leider aufgeben und um Hilfe bei Euch bitten.

Die Frage danach, wie man einen Footer an den unteren Bereich des Bildschirms bekommt, habt ihr sicher schon häufig gelesen. Da hilft die Suchmaschien des Vertrauens weiter (z.B. [1].

Ich hab mich an dem unter [1] angegebenen Link orientiert und meine HTML-Seite Stück für Stück in den Code-Schnipsel von [1] übernommen. Geht auch alles bis zu dem Punkt, wo ich anfange das Mootools.Accordion zu nutzen ([2]).

Auf der Demo Seite sieht man auch einen footer, der immer "mitrutscht", wenn man den Inhalt ausklappt/ zusammenklappt. Leider ist auch dieser aber nicht per Default am unteren Bildschirmrand angedockt, wenn der Inhalt des Accordions kleiner ist, als es die Bildschirmauflösung erlaubt.

Habt ihr eine Idee?
Nachfolgend die vereinfachten Quellcodes
index.html:

<div id="header">
    <img id="logo" src="gfx/logo.jpg" alt="Streifen am oberen Bereich des Bildschirms" />
</div>

<!-- mittleres ContentFenster -->
<div id="contentPane">
    <div class="toggler firsttoggler portfolio"><span>Portfolio</span></div>
    <div class="accordion">
        Inhalt unter Portfolio (u.a. eine Smoothgallery und Lightbox, aber spielt keine Rolle für diesen Snippet)
    </div>
    
    <div class="accordion">
        Inhalt unter Kontakt...
    </div>    
    <div class="toggler lasttoggler kontakt"><span>Kontakt</span></div>
</div>
<div id="footer">
    <div id="nav_bottom">
        <span class="item">home</span>
        <span class="item">portfolio</span>
        <span class="item">kontakt</span>
        <span class="item">impressum</span>
    </div>
</div>

style.css (aufs wesentliche gekürzt):

#contentPane {
	height: 70%;
    width: 700px;
	position: relative;
	top: 8%;
	margin-top: 80px;
	left: 50%;
	margin-left: -350px;
	/*z-index: 10;*/
}

DIV.toggler {
	width: 660px; /* Hier noch ein IE Hack, da 40 PX durchs padding angesetzt werden */
	height: 37px;
	vertical-align: middle;
	color: white;
	font-size: 11px;
	font-family: arial, sans-serif;
	padding: 20px 20px 0px 20px;
	letter-spacing: 0.2em;
}

DIV.firsttoggler {
	background: url(../gfx/contentpane/contentpanetop.jpg) no-repeat;
	border-bottom: 2px #6b6b6b solid;
}

DIV.lasttoggler {
	background: url(../gfx/contentpane/contentpanebottom.jpg) no-repeat;
}

* {
	margin:0;
	padding:0;
}

BODY, HTML {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
#wrap {
	position:relative;
	min-height:100%;
	height:auto !important;
	height:100%;
}
#header {
	width: 100%;
	background: url(../gfx/structure/bg_top_1px.gif) repeat-x;
	background-position: bottom;
	height: 8% !important;
	min-height: 8% !important;
	margin: 0px;
	padding: 0px;
	top: 0;
}

#logo {
	position: absolute;
	margin-top: 2.5%;
	margin-left: -118px;
	left: 50%;
}

#main {
	height: 76%;
	position: absolute;
	top: 8%;
}

#footer {
	width: 100%;
	background: url(../gfx/structure/bg_bottom_1px.gif) repeat-x;
	height: 18%;
	position: relative;
	bottom: 0;
	/*z-index: 10;*/
}

#nav_bottom {
	font-weight: bold;
	text-transform:capitalize;
	text-align: center;
	margin-top: 4%;
	font-size: 11px;
	Font-Family: Arial;
}

#nav_bottom SPAN.item{
	margin-right: 10%;
}

Ich würde mich über Eure Unterstützung freuen.

Grüße
mille

 

[SpiceLab]

Habt ihr eine Idee?

1. Wichtig: CSS - FAQ
2. Webmaster FAQ -> CSS Wie lässt sich der Footer am unteren Fensterrand ausrichten?

Folglich gibt's noch andere Techniken ...

 

[mille]

1. Webmaster FAQ -> CSS Wie lässt sich der Footer am unteren Fensterrand ausrichten?

Folglich gibt's noch andere Techniken ...

Vielen Dank für den Hinweis. Der andere Lösungsansatz (sticky-footer1.html) hat geholfen. Funktioniert also auch mit Mootools.Accordion .

Grüße
mille