[CSS] Div 100% height probleem

[Gersomvg]

Om het probleem even duidelijk te maken dit plaatje:


Wat ik wil bereiken is dat div nummer 4 de hoogte van de div nummer 2 overneemt min de hoogte van div nummer 3. Div nummer 3 heeft dus een variabele hoogte en div nummer 4 een height van 100%.

Het probleem:
div nummer 4 is net als nummer 2 300px hoog wat resulteert in een stuk van nummer 4 dat aan de onderkant verdwijnt.

Google had niet zoveel inspiratie vandaag....

[disjfa]

je kan ook gewoon op de divje nummer 2 een achtergrond geven, ook wel het faken van de hoogte van divje numero 4. Ook wel een vraag die wekelijk hier regelmatig gesteld word, ook wel googlen naar faux columns.

En absoluut positioneren moet je natuurlijk nooit doen als dat niet nodig is.

[ Voor 16% gewijzigd door disjfa op 29-12-2008 11:23 ]

[Gersomvg]

Ik denk te begrijpen wat je bedoelt maar het lijkt me niet dat het hier van toepassing is (kan het mis hebben hoor).

Ik heb een 'organizer layout' met 2 pagina's. Op de rechterpagina komt de content in de gele div.
Dan komt er in de bovenste rode div een kop met een variabel aantal tussenkopjes. Div nummer 4 krijgt dan een overflow-y:auto;
Alleen verdwijnt de scrollbar vanonder in het niets (omdat height 100% gewoon resulteert in 300px height)

edit: absolute positioneren werkt hier wel het makkelijkst aangezien ik overal verspreidt in de organizer allemaal vakjes moet vullen..

[ Voor 13% gewijzigd door Gersomvg op 29-12-2008 11:30 ]

[Copyman]

Ik ben er totaal geen voorstander van, maar volgens mij is dit alleen met hoogteberekening via javascript te bereiken. Someone correct me if I'm wrong.

[Verwijderd]

Copyman schreef op maandag 29 december 2008 @ 12:00:
Ik ben er totaal geen voorstander van, maar volgens mij is dit alleen met hoogteberekening via javascript te bereiken. Someone correct me if I'm wrong.

Klopt.
Het is onmogelijk om als div 3 een variabele hoogte heeft met div 4 de rest van de hoogte op te vullen met alleen CSS.
Je zou wel heel div 4 weg kunnen laten en dan de content van div 4 gewoon in div 2 onder div 3 kunnen zetten. Probleem hierbij is dat je dan een scrollbar langs heel div 2 krijgt die ook div 3 verplaatst als je scrollt.
Je zou daarnaast inderdaad JS de hoogtes kunnen laten berekenen. In dit geval komt het eruit te zien zoals je wil bij mensen die JS aan hebben staan en wordt het iets lelijker (scrollbar over heel div 2) voor mensen die JS niet aan hebben staan.

[ Voor 0% gewijzigd door Verwijderd op 29-12-2008 12:13 . Reden: Onduidelijke zin ]

[Gersomvg]

^{xD Ik zoek in google op javascript hoogteberekening en dit topic komt als eerste resultaat Google-bot heeft het druk..}

Kan dat met een expression in css? Natuurlijk niet zo'n relaxte oplossing want de cssvalidator kan er niet echt tegen.
Of kan ik het beter in m'n javascript document zetten?

[Pkunk]

Je kan toch gewoon divje 2 een background-image geven en vervolgens div4 geen hoogte meegeven. Dan lijkt het alsof hij tot onderaan div2 loopt, maar dat doet hij stiekem niet.

Like zo bijvoorbeeld:
-click-

[ Voor 19% gewijzigd door Pkunk op 29-12-2008 12:43 ]

[Scheeve]

Even voor de duidelijkheid . Je wilt dat er alleen een scrollbar in div 4 verschijnt wanneer nodig? En dus niet een scrollbar voor zowel div 3 als div4? Zo ja, dan ben je toegewezen op javascript. Zo nee, dan is het op te lossen met CSS!

[Copyman]

Om je een klein zetje in de goede richting te krijgen heb ik even vlug een voorbeeld gemaakt, moet je zelf maar even wat netter maken. Ik wil je wel even op het hart drukken dat dit in browsers zonder javascript-ondersteuning niet gaat werken.

[Gersomvg]

Copyman schreef op maandag 29 december 2008 @ 13:14:
Om je een klein zetje in de goede richting te krijgen heb ik even vlug een voorbeeld gemaakt, moet je zelf maar even wat netter maken. Ik wil je wel even op het hart drukken dat dit in browsers zonder javascript-ondersteuning niet gaat werken.

Daar kan ik wel wat mee En als je javascript uitzet flowt de div gewoon over. Als ik de containerdiv dan ook een overflow-y:auto meegeef krijgt de container div gewoon een scrollbalk als javascript uitstaat
hartelijk bedankt

[Gersomvg]

Nog een vraagje (is misschien een beetje subjectief beantwoordbaar maar toch);

Is het een ongeschreven regel dat je websites altijd moeten functioneren zonder javascript of is dat niet perse nodig? Ik heb namelijk een andere website waarin de submit-buttons javascript afhankelijk zijn (aangezien ik niet de klassieke <input type="submit" /> gebruik).

[disjfa]

gersompie schreef op maandag 29 december 2008 @ 16:57:
Is het een ongeschreven regel dat je websites altijd moeten functioneren zonder javascript of is dat niet perse nodig? Ik heb namelijk een andere website waarin de submit-buttons javascript afhankelijk zijn (aangezien ik niet de klassieke <input type="submit" /> gebruik).

Als jij het niet erg vind dat je website werkt met allerlij omwegen en allerlij fakeups dan moet je dat gewoon toelaten. Als je eerder voorbeeld al gebruikt zal je website al met wel javascript browsers eerst compleet moeten inladen en dan zal er nog vanales heen en weer sprnigen. Dus gebruik het allemaal, zolang je het fijn vind te weten dat je gebruiker op een kermis terecht gaat komen.

[maxtz0r]

gersompie schreef op maandag 29 december 2008 @ 16:57:
Nog een vraagje (is misschien een beetje subjectief beantwoordbaar maar toch);

Is het een ongeschreven regel dat je websites altijd moeten functioneren zonder javascript of is dat niet perse nodig? Ik heb namelijk een andere website waarin de submit-buttons javascript afhankelijk zijn (aangezien ik niet de klassieke <input type="submit" /> gebruik).

Er zijn verschillende richtlijnen die aangeven dat een website zonder javascript zou moeten werken. Zie onder andere drempelvrij richtlijnen. Dus in die zin is het wel een ongeschreven regel ja

[Gersomvg]

Nee.. Ik bedoel dat gebruikers die javascript uitgeschakeld hebben echt geen gebruik van de site kunnen maken.

(dat hoogte probleem wordt zo snel verwerkt door javascript dat je toch geen dingen ziet verspringen)

edit: @Maxtz0r; Nou gelukkig levert het probleem wat in dit topic is besproken geen drempel op. Alleen dat de scrollbar ineens over de hele hoogte is maar dat maakt voor de functionaliteit niet uit (voor de layout op zich ook niet)

[ Voor 34% gewijzigd door Gersomvg op 29-12-2008 17:09 ]