Pozicioniranje footer-ja na dno strani

Imam vprašanje glede pozicioniranja footer-ja na dno strani. Spodnja koda je do sedaj lepo funkcionirala v vseh brskalnikih (vse projekte preverjam v IE6,7,8, Firefox 2,3+, Chrome, Opera, Safari):

HTML koda:

<div class='container'>

    <div class='wrapper'>

            <!-- vsebina strani -->

            <div class='push'></div>        

        </div> <!-- wrapper -->



    <div id='footer'>

            <!-- vsebina footerja -->

        </div>

</div>

CSS pa izgleda takole:

html, body {

height:100%;

}

.container {

margin:0 auto;

width:980px;

height:100%;

}

.wrapper {

min-height: 100%;

height: auto !important;

height: 100%;

margin: 0 auto -16px;

background-color:#ffffff;

}

.push {

height:16px;

}

div#footer {

height:16px;

}

Sedaj imam pa primer, ko imam na levem in desnem delu container-ja okrasni rob, ki bi se moral raztegovati vse do dna strani:

div#container {

margin:0 auto;

width:980px;

/*height:100%;*/

padding-left:18px;

padding-right:18px;

background:#ffffff url(background.png) repeat-y;

}

Slike še najbolje ponazorijo situacijo:

V kolikor je "height:100%;" zakomentiran, footer ni pozicioniran na dno:



V primeru, da vrstico height odkomentiram, dobim željeni efekt:



Do težave pa pride pri daljših vsebinah, kjer je potrebno scrollati, saj na levem/desnem izgine okrasni border:

Morda kakšen namig?

Ja sticky footer.

Hm, saj to je to - to je identična koda, ki jo tudi sam uporabljam :)

Aja ok sory, hmm to pa ne vem, se nisem nikoli poglabljal, kak min-height edino.

Mogoče kdo drug ve iz glave ...

hja min-height bi bil fin.. sam IE6 ga ne bo prebavil.

Z min-height:100% le delno rešim problem - stranska robova container-ja se res podaljšata do dna, vendar footer ne potisne na spodnji rob. Npr. konkreten primer je možno videti na http://www.wifi-tehtnica.si (npr. zavihek "Za razvijalce" - v footerju, ki ima zelo malo vsebine).

Hm, AFAIK je footer spodaj, ce je position: absolute in bottom: 0. Vem da sem videl na ta nacin narejeno na enih straneh, nisem pa preverjal cross-browsinga.

Sem tudi že testiral, vendar vedno pride do neke kombinacije, konkretno v tem primer pri scrollingu, kjer se zadeva podre. Nisem ravno začetnik v CSS-ju, se mi je pa sedaj prvič zgodilo, da sem prišel do primera, za katerega nimam več ideje, če sploh obstaja kakšna rešljiva kombinacija :)

Hm, stranski robovi se lahko podaljasjo morda tudi s floatom. Znotraj das seveda clear.