[HTML/CSS] Variabele div hoogte

[Verwijderd]

Ik ben bezig met een website en wil graag een div die een variabele hoogte heeft en een div daaronder met een hoogte van 30px.

Uiteindelijk moet de variabele div dan ook: (volledige schermhoogte - 30px) = variabele div hoogte worden. Wil geen JS oplossing zoals ik in de search tegenkwam.

Dit is wat ik in gedachte heb:



Is dit mogelijk of moet ik dan terug naar de oude tabellen?

Dit heb ik (ter illustratie) geprobeerd:
<div style="float:left; height: 100%;">groot gedeelte</div>
<div style="float:left; height: 100%;">schaduw</div>
<div style="height: 30px;">div 30 px hoog</div>

[ Voor 30% gewijzigd door Verwijderd op 05-07-2005 20:55 ]

[Verwijderd]

het ligt eraan wat je in die 30px div wilt gaan zetten, maar als dat geen footer met bg word is misschien faux columns je best optie

[Verwijderd]

Het wordt een footer met achtergrond, wat is dan de beste oplossing?

[twanvl]

Kan je de footer niet in 'div met variable hoogte' zetten? Je kan er voor zorgen dat hij er aan de recherkant wel buiten komt door margin-right:-100px; oid. te zetten.

[Verwijderd]

Ik heb even geprobeerd om de footer in die div met 100% hoogte te zetten, maar dan heb ik nog steeds hetzelfde probleem als ik de footer buiten die div zet. Want dan moet de schaduw div ook 100% hoogte krijgen - 30px.

Ik heb weer even een voorbeeld geupload:

De html waar ik de footer nog onder aan moet krijgen en voorbeeld plaatje van hoe eigenlijk moet:

http://www.sander.hypnosis-multimedia.nl/tmp/test.html

http://www.sander.hypnosis-multimedia.nl/tmp/vb.png

Hoe kan ik dat het beste oplossen?

[Sappie]

Voor dat rechter gedeelte ("div met andere afbeelding") zou je zoals bakman al aangeeft faux columns kunnen gebruiken. Voor de footer kun je hier kijken [rml][ CSS] De perfecte CSS-only footer[/rml] als de footer naar beneden gedrukt moet worden door de content in de "div met variabele hoogte".

[Verwijderd]

als je een div met 100% hoogte wil gebruiken moet hij wel weten 100% van wat.

dus je HTML en BODY ook op 100% zetten....

[Verwijderd]

Het is me nu gelukt om de rode div rechtsonder te positioneren. In Firefox doet hij het helemaal goed, alleen in IE zit de layer niet helemaal tegen de zij- en onderkant aan. (1 pixel verschil) In Opera sluit de div niet goed aan de bovenkant aan.

Dit is de CSS die ik gebruik:

#footer {
position: relative;
top: 100%;
left: 100%;
margin-left: -129px;
margin-top: -30px;
height: 30px;
width: 129px;
background: red;
}

Weet iemand een oplossing voor het probleem in IE, en wellicht in Opera? Het probleem van die 1 pixel, is dat een vaak voorkomend probleem?

Hier staat de HTML/CSS:

http://www.sander.hypnosis-multimedia.nl/tmp/test.html