[css] height:100% nested in een div zonder height.

[killercow]

Ik heb een probleempje met een nieuwe site, deze site bevat een header die over de hele breedte van de pagina valt, en daar onder 2 content cellen, tussen deze content cellen in zit een zwarte lijn. (een spacer van 1px breed)

de 2 content cellen moeten automatisch groter kunnen worden naarmate er meer content in zit,

ik had hiervoor gedacht dat ik gewoon een min-height kon opgeven zodat hij iig een x aantal pixels hoog is. dit werkt voor geen meter, maar dat is tot daar aan toe, er staat toch altijd wel content in.

Het grote probleem is echter dat om die 3 cellen en de header een achtergrond container zit die ook mee moet schalen. Deze conainer blijft echer helemaal klein en dus onzichtbaar tenzij ik height:100% doe, wat uiteraard de hoogte van het scherm pakt en niet van de content.

als ik nu de content cellen op height:100% zet groeien deze uit de container, dus dat is ook weer niet de bedoeling. dit is op te lossen in IE door body en html ook height:100% te geven, maar dus niet in moz.

op http://www.rushcommerce.com/home/ staat de site
het probleem zit hem dus in de achtergrond. (de buitenste div)

Daarnaast moet de zwarte spacer tussen de content cellen ook autmatisch mee groeien met de content cellen, ik denk dus height:100% maar omdat er om deze 3 cellen nog een container staat die ze bij elkaar houd zonder height weet de browser neit waarvan en blijft de spacer dus netjes 0 hoog (font-size hoog in IE)

Weet iemand hier oplossingne voor?
Ik zat te denken om het linker content divje een border-right:1px solid #000000; mee te geven zodat ik iig een rand heb, maar wat dan als de rechter cel groter is, of als ik deze oplossingh ergens anders niet kan gebruiken.

[Verwijderd]

Ooit in Mozilla gecheckt? Met zoveel inline style en spacergifs/divs is het onmogelijk om even snel aan te geven hoe je zoiets oplost. M.i. kun je beter de pagina opnieuw, gestructureerder opzetten, want zo is het een zooitje.

[killercow]

Verwijderd schreef op 05 januari 2004 @ 12:28:
Ooit in Mozilla gecheckt? Met zoveel inline style en spacergifs/divs is het onmogelijk om even snel aan te geven hoe je zoiets oplost. M.i. kun je beter de pagina opnieuw, gestructureerder opzetten, want zo is het een zooitje.

ik werk op een linux bak, dus jah, wel eens in mozilla gecheckt ja, ik ontwikkel erin.

structuur is als volgt:

HTML:

<div id=container height=100%>
 <div id=header></div>
 <div id=content>
  <div id=left_content></div>
  <div id=spacer></div>
  <div id=right_content></div>
 </div>
 <div id=spacer_right></div>
 <div id=spacer_right></div>
</div>

is dus niet zo ingewikkeld, er staat alleen in de content en de header divs wat content, en daar staan dus nog wat losse divjes in die daar dingetjes als lijntjes enzo regelen.
ik zal de code wel even opmaken zodat het duidelijker is.

[ Voor 9% gewijzigd door killercow op 22-01-2004 15:06 ]