[CSS] Footer altijd onder content

[G F0rce 1]

Beste GoTers,
Ik zit hier met het volgende probleem. Ik heb een website gemaakt met behulp van div's en css. Zonder tabellen dus. Nu wil ik een footer altijd onderaan de pagina.
Dus als de content langer is als 100% moet hij er onderkomen, dit is gelukt.
Maar wanneer de content minder is als 100% van het browservenster komt de footer tegen de langste content aan maar dus niet tegen de bottom van het browser venster.

In mijn zoektocht naar de oplossing op GoT ben ik de volgende topics tegen gekomen:

[CSS] div position vragen
[css] Footer in container, altijd onderaan de pagina

Geen van deze topics bood een concrete oplossing voor het probleem. Ik denk dat andere mensen hier ook nog steeds mee zitten dus mischien dat dit topic voor hun ook nuttig is.

Tussen de resultaten die ik vond op Google zaten verschillende resultaten met oplossingen maar die werkte alleen bij hun pagina opbouw. Dus bijvoorbeeld één grote div met daar in de content, header en footer. Doordat mijn pagina zich al in een vergevorderd stadium bevind is het geen oplossing om de gehele pagina op die manier opnieuw op te bouwen.
Mijn werkwijze is meer geweest voor elk object zoals een plaatje een eigen div om de positie te bepalen en niet zo zeer één grote div waarbinnen posities worden geregeld.

Mijn code is inmiddels zo lang dat het moeilijk is een goed beeld te geven in een uitgeklede vorm zonder 200 regels code te posten. Ik zal julie dit besparen. Het nut lijkt me vrij klein. Als er iemand is die het toch handig lijkt de code te zien wil ik het wel plaatsen met toestemming van een moderator. Ik heb door omstandigheden geen uptodate versie online staan. Zodra dit zo is zal ik de link plaatsen. Een oude versie is te zien op http://www.assurantie-online.nl/ . Er is niet veel veranderd sinds die versie dus voor het idee over hoe de pagina in elkaar steekt moet die url voldoende zijn. Hieronder alsnog wel de class die de positie / eigenschappen van de footer afhandeld.

code:

.footerbar {
    position: relative;
    float: left;
    margin: 0px 0px 15px 0px;
    width: 100%;
    height: 50px;
    bottom: 0%;
    background-image: url(img/{STYLE}/bgfooter.gif);    
    }

De property float: left; zorgde ervoor dat de footer onderaan de pagina blijft staan wanneer de content meer is als 100%. Zonder deze property blijft de footer onderaan het scherm staan. Hier blijft hij staan ook als je begint te scrollen waardoor je dus een footer midden in je scherm krijgt. Wat logischer wijs niet de bedoeling is .

Dus nog éénmaal concreet mijn vraag : Hoe zorg ik dat een footer altijd onderaan de pagina komt, ook wanneer de content minder is als 100% van de pagina?

Alvast bedankt voor de moeite en uberhaubt van het lezen van dit topic !

[creative8500]

Als je niet eens één divje van plek kunt veranderen in de code, dan heb je het wel erg verkeerd aangepakt, maar goed: bedoel je met "onderaan de pagina" niet eigenlijk "onderaan de viewport"?

[G F0rce 1]

Ja sorry ik bedoel dus onderaan het zichbare gedeelde zonder te scrollen. Ik ben nieuw met de term viewport. En begrijp met niet verkeerd. Ik kan die div van positie veranderen. Ik kan hem neer zetten waar ik wil ik kan alleen niet zorgen dat hij onder aan de pagina komt.
Dit komt omdat ik dan de content boven hem een height property moet geven. Wanneer ik dit doe staat de footer netjes aan de onderkant van de pagina, maar blijft daar ook lekker staan. Ook wanneer de content de viewport overschrijdt. En dan zijn we weer terug bij af ....

[Zenda]

Ik denk dat ik ook een oplossing weet.. Je main 'kolom', staat waarschijnlijk helemaal bovenin je code, omdat de content die in deze 'kolom' staat het belangrijkst is.. De footer daarin tegen hoort helemaal onderaan, en daar staat meestal ook de minst belangrijkste informatie in, dus kan deze ook helemaal beneden in je code.. Ik weet niet precies hoe jij je pagina hebt opgemaakt maar misschien is het een idee om je positioning te laten liggen en je footer gewoon onderin je code te plaatsen. Je hoeft het dan niet met absolute positioning op te lossen en je footer zal altijd onderaan je pagina verschijnen.. Ik hoop dat ik niet te veel doms heb gezegd en dat het ook van toepassing is op jou script.. Succes!

[Verwijderd]

http://steve.pugh.net/test/test62.html

[G F0rce 1]

Verwijderd schreef op 03 januari 2004 @ 12:37:
http://steve.pugh.net/test/test62.html

Deze oplossing was er dus één die ik reeds gevonden had. Maar wat ik al zei de opbouw van deze pagina is zo anders als die van mij dat het in mijn geval niet werkt .

[Zenda]

Als je nou position: absolute gebruikt, en dan een bottom en left positie met procenten defineert??

[G F0rce 1]

Ja dan blijft hij staan op de positie die je zecht inderdaad. Altijd! dus zodra je pagina langer is als de standaard viewport zit je met een footer midden in je scherm zodra je gaat scrollen.

[AkaXakA]

code:

min-height: 100%;
margin-top: -*hoogte van element* (dus -250px, bv.)

Dit zal wel niet in IE werken trouwens...

Voor zover ik weet is een footer tegen de onderkant van de viewport houden behalve als de content langer is, onmogelijk om cross browser te doen met css zonder tabellen. Zou wel leuk zijn als iemand een oplossing vond.

[Clay]

dat kan prima hoor

gewoon een container met min-height:100%; een bottom padding ter hoogte van de footer, en position:relative, en een footer met position:absolute en bottom:0; Ongeveer wat Anne ook postte dus. Dat is het principe. Als het er anders uit moet zien moet je de css wat aanpassen.

[ Voor 26% gewijzigd door Clay op 03-01-2004 15:38 ]

[Verwijderd]

Deze oplossing was er dus één die ik reeds gevonden had. Maar wat ik al zei de opbouw van deze pagina is zo anders als die van mij dat het in mijn geval niet werkt .

Wellicht is het handig als je vertelt hoe die opbouw dan _wel_ is aangezien ik, jij en anderen met zo'n antwoord niet opschieten.

Ik geef een oplossing (oke, een URI) die exact goed is volgens de gegeven vraagstelling en toch is fout. Werkt mijn oplossing dan niet of is de vraagstelling dan verkeert?

[Verwijderd]

Ik heb het een en ander geprobeerd met de link van Anne:

HTML:

<html><head><title>Untitled Document</title><style type="text/css">

body { height: auto;}
html,body { margin: 0; padding:0; }
body{
background-color:green;
}
#header {height: 50px; background: #CCC;}
#nav {width: 150px; float: left; margin-bottom: 20px; height: auto;}
#content {margin-left: 150px; margin-bottom: 20px; height: auto;}
#footer { height: 20px; position: absolute; bottom: 0; left: 0; 
//position:expression(document.documentElement.offsetHeight
<=document.body.scrollHeight?'relative':'absolute');
background: #CCC; width: 100%;}
</style></head>

<body>
<div id="header">header</div>
<div id="nav">nav</div>
<div id="content">content

<p><button onclick="alert(document.documentElement.offsetHeight)">test</button>
<button onclick="alert(document.body.scrollHeight)">test</button>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="footer">footer</div></body></html>

Het verschil is dat je hier geen containing div gebruikt.
Het gaat goed in de bekende nieuwste browsers als het goed is. Alleen IE5 met resizen gaat niet goed.
Nadeel van expressions is wel dat het cpu-time vreet.

[ Voor 10% gewijzigd door Verwijderd op 04-01-2004 02:11 ]

[Clay]

Lijkt me wat overkill om met (nb IE only) css expressions die footer te positioneren. En ze zijn imo ook niet nodig

Als je iets onderaan wil moet het bottom:0; hebben. Als die mee moet gaan met de parent moet de position daarvan op relative, en de min-height op 100%, niet de height.
IE interpreteert height als min-height en kent heel min-height niet, dus de height moet toch weer wel op 100% (verwarrend), maar die moet je in echte browsers dan resetten, met height:auto; achter een selector die IE niet snapt en dus niet uitvoert.

Als de footer per se in de body moet kan dat bv op deze manier.

[Verwijderd]

Inderdaad expressions zijn geen goed idee , jouw manier manier werkt ook goed in IE6, maar gaat wel mis in IE5.
Valt daar nog iets aan te doen?

Ik raak wel een beetje in de war van IE. Als body {height:100%} dan is de body-height toch de hoogte van de view-port in IE? Kennelijk niet in IE6 en wordt die automagisch groter als de content overflowt.

[Clay]

Ik heb hier ff geen IE5.x, maar het zou eraan kunnen liggen dat de styles aan de body hangen oid, misschien bugged dat in 5.x. Normaal zet ik daar zelf iig nog een container omheen waar die height trukendoos dan aan gekoppeld wordt.

Height 100% in IE is inderdaad uiteindelijk ook viewport hoogte, maar IE laat iets met 100% height toch gewoon met zijn content meerekken dat het dus meer dan 100% wordt. Dat is eigenlijk het gedrag wat min-height hoort te doen, en height juist niet. die moet "final" zijn. Kan me idd voorstellen dat dat verwarrend is en het geeft andere browsers een slechte naam die het wel "goed" doen, omdat IE toch een bepaald (fout) verwachtingspatroon geeft.

[WAcKiN]

Ik heb lange tijd geprobeerd hetzelfde probleem op te lossen en de enige echt werkende manier (op ie < 5.5 en blijkbaar opera 6 na) onlangs door een collega gevonden is http://scott.sauyet.name/CSS/Demo/FooterDemo1.html .

Zover ik weet werkt het door de html (en/of) body tags een expliciete height te geven of anderszijds de rendering ervan zodanig te beinvloeden dat ze zich gedragen als div's IN de body. Het heeft het een en ander te maken met de onduidelijke regels mbt het renderen van root elementen (html).

Anyway, it works for me!

(Oh, ik zie dat Clay al dezelfde techniek gepost had, terwijl ik dit tikte ... ;] )

[ Voor 9% gewijzigd door WAcKiN op 04-01-2004 14:39 ]