Div wrapper hoogte minimaal 100%, maximaal hoogte van andere div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Rob Rob

Rob Rob

19/07/2016 20:58:53
Quote Anchor link
Hallo,

(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:
Afbeelding

Dit is dus niet meer goed: (Hier zouden de buitenste zwarte divs en de groene even hoog moeten zijn. De blauwe het liefste ook.
Afbeelding

Zelfde verhaal:
Afbeelding



JsFiddle
Gewijzigd op 19/07/2016 21:01:38 door Rob Rob
 
PHP hulp

PHP hulp

18/12/2024 21:27:29
 
Thomas van den Heuvel

Thomas van den Heuvel

19/07/2016 23:39:32
Quote Anchor link
Dus je wilt dat de zwartgroene achtergrond wordt doorgetrokken als ofwel het blauwgroene ofwel het witte kader langer is dan deze zwartgroene achtergrond?

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.
 
Rob Rob

Rob Rob

20/07/2016 01:07:28
Quote Anchor link
Dankewel! Heb nu die w1a en w1c weg gehaald en vervangen door een padding, dat idee was een beetje langs me heen geschoten. Ik heb de kleuren van die w1a en w1c nu als achtergrond gegeven aan mijn body en eigenlijk zie ik nu geen problemen meer. Thanks! Ik weet niet of dit helemaal is wat je bedoelde maar in ieder geval ziet het er nu goed uit. Het vereenvoudigen ga ik zeker nog tijd aan besteden.

Faux columns zien er interessant uit, ga ik zeker nog wat meer over doorlezen.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.