Pozicioniranje footer-ja na dno strani

4 naročniki

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.