Div wrapper hoogte minimaal 100%, maximaal hoogte van andere div
(Onderaan staat een JsFiddle zodat je de code kunt zien en erin kunt werken.)
Eerst even wat algemene informatie:
Ik heb een website bestaande uit een menu, een wrapper div bestaande uit 3 verticale div 'kolommen' (de buitenste), waarvan de middelste weer bestaat uit twee div 'kolommen' (de binnenste).
De linker en rechter van de buitenste 3 divs wil ik graag met een flexibele breedte, de middelste met een vaste.
De binnenste divs wil ik dat de linker een vaste breedte heeft en de rechter in de toekomst flexibel (dan kan de middelste van de buitenste 3 dus geen vaste breedte meer hebben maar moet die afhangen van de breedte van het scherm.
Probleem:
Probleem zit hem in de hoogtes van de linker en rechter div van de buitenste 3. Als ik de hoogte 100% maak, ik wil graag dat ze het scherm qua hoogte vullen, en ik maak de test in de binnenste divs zo lang dat het niet meer in de div past, 'groeien' de buitenste divs niet mee.
Ik heb wel vage manieren gevonden om de buitenste divs mee te laten groeien, maar in dat geval vullen ze geen 100% schermhoogte meer van het scherm op het moment dat er maar weinig tekst in staat.
Foto's van het probleem: (met de flexibele breedtes is geen rekening gehouden in het voorbeeld.
Dit is nog goed:
Dit is dus niet meer goed: (Hier zouden de buitenste zwarte divs en de groene even hoog moeten zijn. De blauwe het liefste ook.
Zelfde verhaal:
JsFiddle
Gewijzigd op 19/07/2016 21:01:38 door Rob Rob
Waarom maak je van w1a en w1c niet gewoon een div met een horizontale padding? Het enige wat je dan volgens mij hoeft te doen is de (resterende) gefloate divs te clearen (voeg een extra (lege) div toe met clear: both; ), de gefloate divs zouden dan doorgetrokken moeten worden volgens mij.
Stap 1 lijkt mij het wat eenvoudiger maken van de opzet. Minder gefloate divs = eenvoudiger.
Waar je misschien op kunt zoeken is "faux columns", want dat is min of meer het probleem waar je mee zit. Alternatief is een achtergrondafbeelding (van 1 pixel hoog) die je verticaal herhaalt. Ook daarmee zou je je ontwerp kunnen vereenvoudigen.
Faux columns zien er interessant uit, ga ik zeker nog wat meer over doorlezen.