[HTML-CSS] Div in div => Height=50% klopt niet. - Softwareontwikkeling

zondag 4 mei 2003 22:59

Acties:

test

Topicstarter

JavaScript:

<html>
  <head>
    <style>
      div
      { border: 1px #000000 solid; }
      body
      { margin: 0px; }
    </style>
  </head>
  <body>
    <div style="height:20px;">Top</div>
    <div style="height:100%;">
      <div style="height:50%;">1e helft</div>
      <div style="height:50%;">2e helft</div>
    </div>
    <div style="height:20px;">Bottom</div>
  </body>
</html>

Waarom werkt dit niet?
Dit zou eruit moeten zien als een balkje van 20 pixels boven en onder, en de 2 middelsten zijn dan even groot.
Maar hij neemt altijd het percentage van het hele scherm, en niet van de parent, zoals normaliter wel het geval is.
Hoe moet ik dit oplossen met DIV`s? Aangezien er al vaker is gezegd dat tabellen niet voor opmaak bedoeld zijn.

If then else matters! - I5 12600KF, Asus Tuf GT501, Gigabyte Gaming OC 16G 5080 RTX, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router

zondag 4 mei 2003 23:27

Acties:

crisp

Devver

Pixelated

probeerseltje, komt wel aardig in de buurt denk:

HTML:

<html>
  <head>
    <style>
      div
      { border: 1px #000000 solid; -moz-box-sizing: border-box; width: 100%}
      body
      { margin: 0px; padding: 0px; height: 100%;}
    </style>
  </head>
  <body>
    <div style="position: relative; height: 100%;">
      <div style="position: absolute; top: 0px; left: 0px; height:20px;">Top</div>
        <div style="position: absolute; padding-top: 21px; padding-bottom: 21px; height: 100%">
          <div style="height:50%;">1e helft</div>
          <div style="height:50%;">2e helft</div>
        </div>
      <div style="position: absolute; bottom: 0px; left: 0px; height:20px;">Bottom</div>
    </div>
  </body>
</html>

Intentionally left blank

zondag 4 mei 2003 23:29

Acties:

Guillome

test

Topicstarter

Gheh, nee die is wel leuk gevonden

Maar het ging meer om het principe, waarom hij de height percentage niet van de parent maar van de body pakt.
Omdat mijn pagina veel ingewikkelder is, is dit niet mogelijk

If then else matters! - I5 12600KF, Asus Tuf GT501, Gigabyte Gaming OC 16G 5080 RTX, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router

zondag 4 mei 2003 23:32

Acties:

MAZZA

Barbie is er weer!

Het enige wat ik kon bedenken was dat de body ook een height mee moest krijgen (de body is tenslotte de parent container). Dat hielp alleen ook niet

zondag 4 mei 2003 23:34

Acties:

Guillome

test

Topicstarter

`t Kan zeker alleen maar met een tabel eromheen?
Maar waar zijn die Div en anti tabel goeroe`s dan? Die altijd schreeuwen dat Tabellen niet voor opmaak zijn

If then else matters! - I5 12600KF, Asus Tuf GT501, Gigabyte Gaming OC 16G 5080 RTX, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router

zondag 4 mei 2003 23:42

Acties:

crisp

Devver

Pixelated

hij pakt de height van de body omdat dat z'n container is.
Je kan ook een <div> of een ander element als container gebruiken, maar die moet dan expliciet relatief of absoluut gepositioneerd zijn.
Het blijft zeker in IE echter nog wel eens behelpen, dit werkt bijvoorbeeld prima in Mozilla:

HTML:

<div style="position: absolute; top: 20px; bottom: 20px; height: auto;">
  <div style="height:50%;">1e helft</div>
  <div style="height:50%;">2e helft</div>
</div>

Intentionally left blank

maandag 5 mei 2003 10:56

Acties:

Verwijderd

ik werk nooit met procenten, alleen met pixels.
Dan geef je alles gewoon de maat die je wilt hebben, en geen gezeur met procentjes ed.

maandag 5 mei 2003 10:57

Acties:

Mr_Kite

Alles van waarde is weerloos

Met het verschil dat dat bij hogere resoluties soms vervelend kan gaan worden....