Archief - 100% height min vaste waarde binnen div

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
B

Beter Ban

Legacy Member
Hallo, ik worstel al een paar uur met een relatief eenvoudig probleem. Ik heb volgende HTML:
HTML: 
<div class="instance" style="width:400px; height:300px;">
  <div id="container">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</div>

Nu wil ik dat container 100% breed en 100% hoog is van instance, top en bottom elk 25px hoog en 100% breed en middle 100% breed en (100%-(2*25px)) hoog. Hoe doe je dat in CSS?:help:
N

Novaweb

Legacy Member
Als ik het goed voor heb wil je de container 25px van de top en bottom hebben ? Correct ?

Anders zul je het beter moeten uitleggen.

Dennis
B

Beter Ban

Legacy Member
Novaweb zei:
Als ik het goed voor heb wil je de container 25px van de top en bottom hebben ? Correct ?

Anders zul je het beter moeten uitleggen.

Dennis
Klik om te vergroten...
Een poging om het beter uit te leggen:

instance heeft een vaste breedte en hoogte. container moet exact even breed en even hoog zijn als instance. container bevat drie div's: top, middle en bottom (top bovenaan, bottom onderaan en middle ertussen). top en bottom hebben een vaste hoogte (bv. 25px) en zijn even breed als container (en dus even breed als instance). Tot daar geen problemen. Maar nu wil ik dat middle als hoogte krijgt: de hoogte van container min de hoogte van top min de hoogte van bottom.

Dus bovenaan krijg je top met een vaste hoogte, onderaan bottom met een vaste hoogte, en daartussen middle met de resterende hoogte.
j

j design

Legacy Member
height:300px; -25px -25px = 250px ..

btw, lose container. Ge hebt toch u instance als wrapper
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan