Získanie päty dole, keď je stránka vytvorená z absolútnej polohy - html, css, css-position, footer, lepkavý päta

Mám stránku, kde sú jej časti vytvorené z absolútne umiestnených divícií.

To fungovalo skvele, kým som sa nepokúsil dostať pätu na stránku.

Môj problém je, že nemôžem použiť dnoVlastnosť vložiť do päty, pretože spodná vlastnosť ju opraví na spodnú časť obrazovky, nie na stránku. Keď je obsah stránky dlhší ako obrazovka, potom päta prejde pod obsah.

A nemôžem položiť pätu na dnotok prvkov, pretože nie je prúdenie prvkov. Všetky divy sú absolútne umiestnené, takže ak vložím niečo, čo je statické alebo relatívne umiestnené, ide priamo do hornej časti stránky pod hlavičkou.

A žiadna z týchto lepkavých pätiek nefunguje, pretože závisia od toku prvkov, ktoré už položili pätu v spodnej časti stránky.

Tu je jsbin: http://jsbin.com/oxefev/edit#javascript,html

Tento problém by bol veľmi ľahko odstrániteľný, ak by existoval spôsob, ako to urobiť bottom Vlastnosť css prejde na spodnú stranu stránky namiesto obrazovky.

edit: Mohol som len staticky umiestniť a použiť margin-top Vlastnosť ju núti do dolnej časti stránky nastavením na margin-top:1000px; ale potom by som to musel zmeniť vždy, keď pridám alebo odstránim obsah zo stránky.

odpovede:

Mojim prvým odporúčaním by bolo: nezabudnite absolútne všetko. Aký je prínos?

Napriek tomu môžete dosiahnuť to, čo hľadáte, v ponuke javascript. Niečo ako:

document.getElementById("footer").style.top = document.getElementById("content-wrapper").clientHeight + 150 + "px";

EDIT:

Zdá sa, že to funguje a nebudete potrebovať zmenu, ak upravíte výšku hlavičky (+/- niekoľko pixelov na základe modelov boxov):

document.getElementById("footer").style.top = document.body.clientHeight + document.getElementById("footer").clientHeight + "px";

jQuery (document) .height () vracia pre mňa správne a konzistentné výsledky pre prehliadač. Akonáhle poznáte výšku umiestnenia obsahu, zápätie by malo byť jednoduché.