[CSS] Footer op bodem

[Verwijderd]

Doel: Een website in elkaar zetten met een footer die altijd op de bodem van de pagina blijft. Niet op de bodem van het browserscherm. De footer komt dus altijd na de content, ook wanneer je moet scrollen.

Probleem: Ik heb een header en een footer die net zo breed zijn als je browserscherm. Tussen deze twee zit de content in een wrapper van 900 pixels en deze is gecentreerd met margin 0 auto. De html & body tag hebben een height van 100% en de wrapper een min-height van ook 100%. Daarnaast heeft de main content een overflow auto en padding bottom met de hoogte van de footer in pixels. De footer krijgt een negatieve margin top van de hoogte v/d footer in pixels, relatieve positionering & clear both.

(ter verduidelijking van dit verhaal kun je dit als referentie materiaal gebruiken, het komt op hetzelfde neer behalve het feit dat de wrapper in dit voorbeeld geen breedte heeft die ook nog is gecentreerd is met margin 0 auto, wat ik dus wel wil in mijn ontwerp: http://www.cssstickyfooter.com/style.css)

Wat er nu gebeurt is dat de footer extra naar beneden geduwd word dankzei de margin 0 auto op de wrapper. Met deze techniek om je footer altijd aan de bodem van je pagina te krijgen ben je dus gebonden aan het feit dat je nooit margins kunt gebruiken omdat anders je footer extra naar beneden word geduwd.

Verder werkt een fixed positionering met bottom 0 niet. De footer blijft in dit geval altijd aan de bodem van je browserscherm. Wanneer je dan moet scrollen zit de footer altijd over de content heen en dit is niet het resultaat wat ik wil bereiken.

Vraag: Bestaat er een mogelijkheid om de footer altijd aan de bodem van de pagina te hebben, na de content, zelfs wanneer er gescrolled moet worden, waarbij je verder op de pagina ook nog gebruik kunt maken van margins? Zo niet, wat zou dan een andere goede oplossing zijn? Heb al behoorlijk wat tijd erin gestoken en gegoogled maar kom niet echt tot een proper resultaat.

[RobIII]

Ik denk dat je vraag niet helemaal klopt; ik denk dat je je footer onderaan je viewport wil hebben (niet je pagina) tenzij je content langer is, dan moet 'ie naar beneden schuiven? Want wat je beschrijft in je vraag is dit; een footer die braaf onder de "pagina" staat (en blijft staan, ongeacht de hoogte van de content).

Wat je bedoelt is dit waarbij de footer uit je viewport schuift wanneer je content lang(er) is zodat 'ie de content nooit overlapt (wat in deze fiddle niet het geval is). Toch?

[ Voor 39% gewijzigd door RobIII op 14-02-2012 20:04 ]

[Verwijderd]

Dat klopt helemaal. In de fiddle die je linkte in je post werkt dit inderdaad niet en ik heb ook geen idee hoe ik dit wel werkend krijg.

[RobIII]

Ik gaf je nog wel zo mooi wat keywords om mee te googlen, maar dan zal ik 't maar doen:
[google="footer bottom of viewport"] -> 1^e hit. En de aangepaste fiddle met meer content.
_{Geen idee wie fiddle 2 t/m 5 heeft lopen klooien}

[ Voor 30% gewijzigd door RobIII op 14-02-2012 20:26 ]

[Verwijderd]

Ik ben sowieso verantwoordelijk voor #5, misschien die andere daarvoor ook wel. Excuses! Verder was ik al aan het zoeken naar de keywords die je me gegeven had. Met die keywords, in combinatie met de fiddles, kan ik weer even lekker aan de slag. Ga het vanavond/morgen sowieso proberen en ik kom terug met m'n resultaat!

[RobIII]

Verwijderd schreef op dinsdag 14 februari 2012 @ 20:30:
Met die keywords, in combinatie met de fiddles, kan ik weer even lekker aan de slag.

Zorg nou even dat je de 1e hit die ik linkte leest; dan begrijp je 't principe ("truukje") en moet je in no-time voor jezelf een oplossing kunnen uitwerken.

[Verwijderd]

Voor zover ik tot nu toe heb kunnen lezen en proberen is dit een deel van de oplossing die ik nodig heb. Aangezien mijn container een bepaalde breedte moet krijgen en gecentreerd moet worden krijgt mijn footer automatisch ook deze breedte omdat hij deze aanneemt van zijn parent div. Nu wil ik dat de footer de breedte krijgt van de viewport. Nu ga ik niet vragen om een oplossing maar ik zou graag wel op weg geholpen willen worden door het verkrijgen van de juiste keywords/zoektermen hiervoor? Dus zoektermen voor het breken van de breedte van een parent div.

edit: of is zoeken naar "breaking parent div width" voldoende?

[ Voor 5% gewijzigd door Verwijderd op 14-02-2012 20:51 ]

[RobIII]

Verwijderd schreef op dinsdag 14 februari 2012 @ 20:47:
Aangezien mijn container een bepaalde breedte moet krijgen en gecentreerd moet worden krijgt mijn footer automatisch ook deze breedte omdat hij deze aanneemt van zijn parent div. Nu wil ik dat de footer de breedte krijgt van de viewport.

Ik zie het probleem niet Wat je nu je container met bepaalde breedte noemt is gewoon de gele div (die in mijn fiddle toevallig content heette). Kwestie van wat classjes hernoemen et voila; exact hetzelfde met andere naampjes voor de beestjes.

En anders mag je wel eens wat duidelijker worden in wat je nou bedoelt

[ Voor 42% gewijzigd door RobIII op 14-02-2012 21:07 ]

[Verwijderd]

Je uitleg was perfect en ik heb werkend wat ik werkend wil hebben. Onduidelijkheid was voortgekomen uit een dag hard bikkelen op het werk en daarna nog even hard gaan met dit mini project. Nu ik er even rustig voor heb kunnen zitten is alles pico bello duidelijk.

Hartstikke bedankt!