[CSS] Footer + container op kleine schermen niet goed.

[anoniem]

Ik heb een probleempje met mijn footer en container. De footer moet ten alle tijden onder de content staan. En wanneer de content korter dan de browser is, onderaan het browser. dit is de huidige code: [code:1:f24ffe1363] #footer { position: fixed; bottom: 0; width: 900px; height: auto; clear: both; overflow: hidden; } #container { width: 900px; background: #FFFFFF; margin: 0 auto 0 auto; border-left: #000000 1px solid; border-right: #000000 1px solid; text-align: left; bottom: 0; min-Height: 100%; } [/code:1:f24ffe1363] Probleem is nu dat de footer bij een klein scherm (waarbij dus de content langer is dan de lengte van het browser) wel netjes onderaan de browser staat. maar bij het crollen komt de content onder de container en de footer ligt over de content heen. Nou is het op zich geen probleem dat deze eronder verdwijnt. Wel vind ik het een probleem dat de container niet doorloopt. Eigenlijk wil ik beide zaken hebben opgelost. Nou heb ik geprobeerd om de footer zonder position te gebruiken. maar dan draait het probleem zich om. Kleine schermen geen probleem, maar grote schermen gaat de footer op de hoogst mogelijke positie onder de content staan, en niet onderaan de browser. De container loopt dan wel gewoon door tot onderaan het browser. Dit wilde ik weer oplossen door een @media code in te voeren. Maar dan moet je een vast gegeven invoeren zoals min-height: 600px; En dan krijg je bij bijvoorbeeld een scherm van 800px en een content die langer dan dat is, weer het probleem dat de footer niet goed staat. op dit moment kom ik er dus niet uit. Heeft iemand een idee hoe ik dit kan oplossen?

[anoniem]

Het is me niet echt duidelijk wat het probleem is. Omdat ik niet snap wat je met 'browser' bedoeld. (Vast niet wat ik onder een browser versta, want de eerste website buiten een browser moet ik nog tegenkomen ;) En ten tweede omdat je de HTML code niet post. Nu zie ik de context van de CSS code niet. Wel [u:67cfd7d075]lijkt[/u:67cfd7d075] het op een aloud probleem waar veel mensen tegenaan lopen, waarbij ze willen dat de footer netjes met de content van bovenliggende elementen mee naar beneden schuift, ongeacht of dat weinig of veel is. Mocht dat het probleem zijn, dan is de oplossing waarschijnlijk om de fixed position uit je footer te halen (Dat lijkt me sowieso handig, wat het probleem ook is) en de bovenliggende div (#container?) te voorzien van: overflow: hidden;

[anoniem]

Zal even wat extra info verschaffen: div container staat uiteraard om alles heen. Content is een apart divje met tekst. Footer staat als laatste voor het eindigen van de container. Probleem is dat ik zowel wil dat deze met de lengte van de content meegaat. Als dat deze bij een korte content, op de laagste mogelijke positie van je browserbeeld staat. Dit laatste doet ie alleen met fixed. En dat betekend dat ik alleen bij kleine schermen in de problemen raak. Haal ik fixed weg, dan doet ie het juist bij kleine schermen juist (onder content de footer) maar bij grote schermen staat de footer ook recht onder de content, in plaats van onderaan het scherm. Dus jij hebt een scherm die bijvoorbeeld op 1024x768 staat. En de content is langer. Blijft de footer netjes onderaan staan. Maar de content loopt door tot onder de container div. Terwijl de div container een hoogte 100% en minimale hoogte van 100% heeft. En pas afgesloten wordt NA de footer En dus eigenlijk over het hele scherm zou moeten staan. En de footer zou daar weer onder moeten. Maar die gaat dus onderaan het scherm wat je ziet staan. En dat komt door die fixed positie, dat snap ik. Alleen het probleem met die niet doorlopende container. tot einde content bij grote content niet. Hoe ik dit geprobeerd heb op te lossen is door de footer te voorzien van een @media element op een bepaalde schermgrootte. Maar als dan het scherm nog kleiner is (en tegenwoordig komt dat nog steeds voor, mensen die bijvoorbeeld op 800x600 resolutie draaien) Site moet dus bruikbaar zijn voor alle browserformaten, en dat issie dus nu niet. Alleen op grote formaten kan deze goed draaien. Maar als ik weer veel content heb (meer dan op een groot scherm past) krijg ik het probleem ook weer. Ik ga in elk geval eens proberen om de footer div buiten de container div te gebruiken. En dan bijvoorbeeld de position op relative te zetten, neem aan dattie dan relevant wordt aan de containerdiv. En dan met een negatieve margin de footer iets omhoog zetten En de content een margin geven zo dik als de footer. (plus nog wat extra zoals t nu ook is) Hopelijk doet dat misschien wat ik wil.

[anoniem]

opgelost: footer compleet buiten de container geplaatst. Toen bleek dat ik ineens een margin boven de container had (die was er eerder niet?) toen body/html margin-top en margin-bottom op Auto gezet. Want ik vond verder geen verklaarbaar punt waarop deze erin was gezet in de rest van de css. Waarom bottom ook: in firefox flikte ie het om juist eronder nog een randje te laten...