[CSS] container div met 100% height

[Verwijderd]

Hallo,

Ik ben momenteel een website aan het bouwen en ben op een probleem gestoten waar ik niet meteen een oplossing voor vindt, ook niet na uren lang te google'en en raad te vragen bij medestudenten.

Neem maar eens een kijkje op volgende pagina: http://www.chirobouwel.be.../index.php?page=foto&id=1

Zolang als je geen verticale scrollbalk hebt lijkt alles in orde te zijn. Het is dus ook de bedoeling dat de rode balk steeds doorloopt tot onderaan de pagina. Als je nu het venster verkleint tot je een verticale scrollbalk krijgt, dan zie je dat de rode balk niet langer meer blijft doorlopen.

Als je dan in de CSS gaat kijken, zie je dat de body, html een hoogte (en zelfs een min-height) van 100% meehebben en de container div (met de rode balk als achtergrond, repeat-y) ook. Toch blijkt er ergens iets niet te kloppen, ga het probleem ook maar eens na met firebug of dergelijke tools. De container lijkt niet mee te willen groeien met de inhoudvak div en de container neemt ook niet de volledige hoogte in beslag...

Alvast bedankt!


mvg, Timmke

[Morrar]

Zoek eens op faux columns, oftewel nep kolommen...

Je moet die rode balk gewoon verwerken in een achtergrondplaatje dat zich herhaalt over de Y-as. Probleem opgelost.

Het probleem ontstaat overigens omdat de 100% de volledige hoogte van het scherm is, maar niet alles wat daar nog onder komt en waarvoor je dus moet scrollen.

@hieronder: je moet het ook in de body doen Maar ik zie nu wel dat hij daar al de horizontale gradient in opgeeft. Dat wordt dan dus lastig...

[ Voor 50% gewijzigd door Morrar op 03-08-2009 00:04 ]

[DeluxZ]

Als je naar zijn HTML kijkt zie je dat hij dat wel gedaan heeft kijk in zijn CSS naar de container div.

[Da Weef]

Als je de body nu een min-height meegeeft, die om en nabij het moment ligt dat de verticale scrollbalken verschijnen, is het probleem waarschijnlijk verholpen.

In jouw geval lijkt een min-height van 580px te werken...

Maar een betere oplossing is om ervoor te zorgen dat je container netjes meerekt met je inhoud


EDIT: Dit laatst is te bewerkstelligen met een clearing div. Je zal dan wel je content div wel volledig moeten laten floaten (met een margin-top ipv top)

[ Voor 51% gewijzigd door Da Weef op 03-08-2009 09:20 ]

[Verwijderd]

Alvast bedankt voor de snelle reacties allemaal.

Ik ben intussen ook even aan het experimenteren geweest met de faux columns, maar zonder succes.
Ook staat er vermeld dat dit probleem enkel in FF en Opera zich zou voordoen, maar in mijn geval ook in IE (uitgezonderd IE6, die geeft alles perfect weer).

Een clearing div had ik ook al eens geprobeerd, en heb het nu dus nogmaals gedaan zonder succes. Ik heb nu dus geprobeerd te floaten met de margin-top ipv top. Maar ook dit lukte niet.

Als er nog voorstellen zijn voor een oplossing, laat maar komen. Mss ook met specifieke stukken css/html als het mogelijk is?

[Verwijderd]

Hopla: Het is me dan uiteindelijk toch gelukt.
Khad men container height op 100% staan... Deze moest op auto staan en een min-height van 100% + dan ook nog een hackje voor IE6. En door daarna gebruik te maken van een clear:both in body,html is het probleem verholpen.

Bedankt voor de hulp!

[Bosmonster]

Detailtje trouwens.. gebruik GIF of PNG voor je menu-items (of maak ze gewoon tekst, nog beter, het is volgens mij gewoon Arial).

Die JPG-prut ziet er echt niet uit..

Geldt overigens voor zo'n beetje alle elementen die je gebruikt. JPG is voor foto's, gebruik GIF of PNG voor de rest.

[ Voor 26% gewijzigd door Bosmonster op 03-08-2009 23:20 ]