[css] Height opvullen

[Verwijderd]

Hallo,

Ik zit met een klein probleempje in een layout. Ik heb 1 div met daarin 5 divjes. In de main-div staat geen content behalve de div's zelf. In die div's komt dus content te staan, maar door de layout wil ik dus dat elke div meegroeit met de height van de content-div.

Dus als div1 100 pixels hoog is door content dat de height van div2 tot 5 ook die hoogte heeft zodat borders en backgrounds ook dorlopen en niet stoppen waar hun eigen content stopt.

Wat ik al heb geprobeert:

Cascading Stylesheet:

height: 100%;
height: inherit;

Oplossingen die ik liever niet zie:
Javascript om de hoogte te checken aangezien er meerdere van die main-div's komen en het erg onhandig is die allemaal te laten checken.
De borders en backgrounds als backgroundimage te gebruiken in de main-div omdat de width ook kan veranderen van de andere div's door de inhoud ervan.

Bvd.

[Soultaker]

Misschien niet de height invoeren, maar top en bottom vastzetten?

[Verwijderd]

Die divjes hebben helemaal geen height, ik had 100% al geprobeert. Maar 100% is toch altijd 100% van de parent? Nu lijkt het wel alsof het 100% is van de content terwijl dat logisch is als het met de content meerekt. .

Ik heb het ook getest door een waarde op te geven en als ik een waarde opgeef dan komt hij wel tot die hoogte dus ze kunnen wel hoger. .

[Verwijderd]

Soultaker schreef op woensdag 30 augustus 2006 @ 01:30:
Misschien niet de height invoeren, maar top en bottom vastzetten?

ik denk dat Soultaker bedoeld dat je eens moet proberen de height helemaal niet te definieren. En de rest wel.

[Verwijderd]

Verwijderd schreef op woensdag 30 augustus 2006 @ 01:45:
Die divjes hebben helemaal geen height, ik had 100% al geprobeert. Maar 100% is toch altijd 100% van de parent?.

Alleen als je de height van de parent ook hebt gedefinieerd. Anders niet.

[Verwijderd]

Verwijderd schreef op woensdag 30 augustus 2006 @ 02:02:
[...]


Alleen als je de height van de parent ook hebt gedefinieerd. Anders niet.

Is er geen mogelijkheid om ze door te laten groeien naar de hoogte van de parent die dus variabel is in css? Soort van inherit dus.

[b19a]

Neen. Je zou met achtergrondafbeeldingtruukjes misschien je doel kunnen bereiken.

[Verwijderd]

Ik heb het probleem nu 'opgelost' door toch een background-image te gebruiken, het enige irritante is nu dat als ik de width van de vakjes uit zou willen breiden ik telkens het plaatje moet veranderen. Zoals ik net al moest. En natuurlijk het vervelende als ik een kleur zou willen aanpassen.

Ik sta nu ook open voor (snel werkende) js oplossingen(Ik heb dat al wat geprobeert maar ik snap niet hoe ik die div's de height van hun parent kan laten krijgen.)

Het liefste zou ik een css-oplossing vinden ookal is het een css-hack.

Bvd.

[Rowanov]

Een css oplossing zonder css3 is onmogelijk en aangezien praktisch niets van css3 geimplementeerd is in browsers is het even behelpen met faux-collumns.

Ik gok, aangezien je die info niet hier hebt staan, dat het een vak is met ronde hoeken of andere fratsen aan de rand. Als je plaatje de mogelijkheid heeft om het op te splitsen in rechts en links zou je met behulp van een extra element de balk schaalbaar kunnen maken door beide elementen een deel van de achtergrond mee te geven. In het geval van een menu kun je bijvoorbeeld de ul gebruiken als extra element en hoef je er geen toe te voegen. Meer kan ik er niet over zeggen zonder een voorbeeld van jouw kant

In het meest extreme geval kan je altijd een javascript oplossing gebruiken. Dat script moet dan de hoogte van je kolommen opvragen en met elkaar vergelijken om de hoogste waarde er uit te pikken. Met die waarde kan je dan expliciet de stijl van de andere kolommen aanpassen aan de correcte hoogte. Code ga ik je niet geven, aangezien al deze losse stappen makkelijk met google te vinden zijn.

[user109731]

Rowanov schreef op woensdag 30 augustus 2006 @ 13:12:
Een css oplossing zonder css3 is onmogelijk en aangezien praktisch niets van css3 geimplementeerd is in browsers is het even behelpen met faux-collumns.

display:table en display:table-cell zijn gewoon CSS2 Het probleem is alleen dat een bepaalde browser (3x raden welke) dit niet ondersteund...

[tec]

http://alistapart.com/articles/holygrail

Zie kopje equal height columns. Oplossing zonder javascript en background-images.

[Rowanov]

Grote prutser schreef op donderdag 31 augustus 2006 @ 08:20:
[...]

display:table en display:table-cell zijn gewoon CSS2 Het probleem is alleen dat een bepaalde browser (3x raden welke) dit niet ondersteund...

Hetzelfde voor elke andere geschikte property, zoals column Vaak zijn er wel vergelijkbare dingen met een -moz- prefix voor FF te gebruiken, maar in IE kan je het lichtelijk vergeten.

@tec: is niet de meest elegante oplossing en werkt niet perfect volgens de website van de maker.

[ Voor 75% gewijzigd door Rowanov op 31-08-2006 09:51 ]

[tec]

In de huidige generatie browsers gaat het prima.. als je je site goed opbouwd dan kun je voor de minder bedeelden of koppige mensen die nog steeds een oude browser gebruiken een minder perfect design tonen wat nog steeds prima leesbaar is.