div bottom pagina, scroll mee als content groter word

[killer4all2]

Goedendag,

Momenteel ben ik bezig met een website en ik loop een beetje vast op een probleempje. Ik heb Footer die onderaan de pagina moet blijven. Deze footer moet echter wel naar benede geduwd worden als de content die erboven zit te groot word. De content mag er dus niet onderdoor of overheen gaan. De footer moet dus naar benede geduwd worden waardoor er een scrollbar komt.

Voorbeeldje:

De content heeft een height van 500px; dit is niet genoeg om de footer benede te krijgen. Wat er dus moet gebeuren is dat de content op 1 of andere manier naar benede gaat. Maar als de content wel groot genoeg word, bijvoorbeeld als iemand de browser kleiner maakt, dan moet de footer niet over de content heenvallen of eronderdood. Hierdoor is het gebruik van een position: fixed; niet mogelijk.

Ik hoop dat iemand weet hoe ik dit probleem op kan lossen!

Code die hoort bij het voorbeeld:

<style>

#content{
width:500px;
height:500px;
margin:0 auto;
background:#000;
}

#footer{
width:100%;
height:150px;
background:#333;
}

</style>

<div id='content'>
Text
</div>

<div id='footer'>
text
</div>

 

[killer4all2]

Weet echt niemand het antwoord ik heb uren lopen zoeken maar ik kan niet echt het antwoord vinden

 

[csshunter]

Hoi killer4all2,

Weet echt niemand het antwoord

Tussen 16 november 2012, 16:21 en 16 november 2012, 19:47 zit welgeteld nog geen 3,5 uur.
Ik zou niet heel erg verbaasd zijn al er op een forum (dat draait op vrijwilligers) niet binnen een dag een antwoord komt!

• Maar kijk eens hier: footer-via-minHeight-1.htm

Met vriendelijke groet,
CSShunter

 

[tiran818]

Eigenlijk waar CSShunter al naar doorverwijst, als je in je #content in plaats van een vaste hoogte van 500px een minimum hoogte aangeeft (dus in plaats van heigth:500px; word het dan min-height: 500px) dan schaalt ie mee. je kan ook besluiten om als de tekst meer wordt deze te laten scrollen binnen je #content. dat doe je door overflow: auto; toe te voegen aan je #content.

 

[csshunter]

Mja, mmm-nee.

Mja, tenminste...
Als je de #content vastprikt op bv. 500px hoog + een {overflow:auto;} geeft, dan komt de footer er altijd onder, en als de hoogte meer wordt dan 500px komt er een inwendige scrollbar naast die 500px hoogte van de #content.
Dat werkt op zich, maar dan staat de #footer niet altijd tegen de onderrand van de browser. Dat hangt helemaal af van het window-formaat van de browser (resp. de resolutie van de bezoeker).
Nadeel:

• Neem je de #content-hoogte niet zo groot, dan krijg je bij hogere resoluties (/grote vensters) vrije ruimte onder de #footer.
• En neem je de #content-hoogte wel groot, dan krijg je bij lagere resoluties (/kleine vensters) dubbele verticale scrollbars: één om bij de onderste helft van de #content resp. bij de #footer te kunnen komen, plus de extra binnen-scrollbar van de #content als die hoger is dan de vastgeprikte hoogte.
• Eigenlijk gaat het op deze manier maar bij één bepaalde venster-hoogte goed, en het is puur toeval of de bezoeker die hoogte van z'n browser heeft (naast resolutie en een al of niet kleiner gemaakt window speelt ook bv. mee: extra toolbars voor browser add-ons, statusbalk aan/uit, enz.: die pakken ook ruimte van de beschikbare pagina-hoogte af). Bovendien: bij dezelfde venstergrootte heeft de ene browser veel meer beschikbare pagina-hoogte dan de andere! Cross-browser / cross-resolutie gaat dus nooit.

Mmm-nee, tenminste...
Als je de #content een minimum-hoogte geeft, dan hangt de footer er altijd onder, en het probleem van dubbele scrollbars is er dan niet. Maar het probleem van de vrije ruimte speelt nog steeds.
Nadeel:

• Neem je de minimum #content-hoogte niet zo groot, en heb je een pagina met weinig content, dan krijg je bij hogere resoluties (/grote vensters) vrije ruimte onder de #footer.
• En neem je de minimum #content-hoogte wel groot, en heb je een pagina met weinig content, dan krijg je bij lagere resoluties (/kleine vensters) vrije ruimte boven de #footer: er zit dan een gat tussen de laatste content-regel en de footer, dwz. dan komt de footer al gauw buiten het window, en moet de bezoeker langs die loze ruimte naar beneden scrollen om de footer boven water te krijgen.
  Bovendien is het de vraag of de bezoeker er bij het zien van lege ruimte onder de content aan denkt dat er misschien ook nog iets onder de onderrand van z'n browser kan staan (dat kan je alleen maar opmerken door naar de hoogte van de scrollbar te kijken; dat doet niet iedereen).
• Dit kan dus alleen werken als je tevoren weet dat je op elke pagina (vrijwel) dezelfde content-hoogte hebt. - Of je zou per pagina de stijl van de content-hoogte moeten aanpassen: een andere minimum-height voor elke pagina (resp. bij elke wijziging van de hoeveelheid content van een pagina). Dan zijn de lage resoluties afgedekt. - Maar dan nog kan bij hoge resoluties de footer boven de onderrand komen te hangen.

Conclusie:
Als je bij alle resoluties en alle browsers de footer precies onderop wilt hebben als er weinig content is, en als je de footer meteen onder de content wilt hebben als er veel (scrollbare) content is, dan zal je maatregelen moeten treffen zoals in mijn voorbeeld-pagina van hierboven. *)

• NB: de min-height zit bij mij niet op de #content zelf, maar op een extra #contentwrapper.

Met vriendelijke groet,
CSShunter
__________
*) Er zijn ook andere mogelijkheden om hetzelfde te bereiken, bv. met een extra <div id="footer-push">.