(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
