ugrás a tartalomhoz

felosztás három felé div-vel

domel · 2015. Feb. 6. (P), 11.22
Üdv!
Azt szeretném megoldani, hogy div-ekkel három felé osztom a képernyőt, a felső fele 50 pixel magas, az alja 50 pixel magas, a közepe meg alkalmazkodjon a kettő közé. Ezt táblázatban így oldanám meg:

<table height="100%" width="100%">

  <tr bgcolor="#0151df" height="50">
    <td>a</td>
  </tr>

  <tr bgcolor="#61a1df">
    <td>b</td>
  </tr>

  <tr bgcolor="#f1a1df" height="50">
    <td>c</td>
  </tr>
</table>
Sajnos div-ben sehogy nem jön össze, max úgy hogy az alsó-felső div-ek fixek, de akkor meg a harmadik div bemegy az alsó-felső alá :(
Tudnátok segíteni?
‹ kép feltöltése tallózás után, "feltöltés" gomb nélkül JS matek, tizedesek ›
 ■
1

margin / placeholder / calc

szabo.b.gabor · 2015. Feb. 6. (P), 14.06
Szia!

lehet fixed az alsó, felső, a tartalom előtt után meg van egy-egy placeholder div, avagy azt mondod, hogy

box-sizing:border-box;
margin: 50px 0;
height: 100%;

avagy
height: calc(100% - 100px);

ilyesmik..

meg van meg valami display:table-cell irány is.
2

<div class="container">

Poetro · 2015. Feb. 6. (P), 14.56
<div class="container">
  <div class="header"></div>
  <div class="content">bla</div>
  <div class="footer"></div>
</div>
.container {
  height: 100%;
}
.container {
  position: relative;
  box-sizing: border-box;
  padding: 50px 0;
}
.header, .footer {
  height: 50px;
  position: absolute;
  background-color: red;
  width: 100%;
  top: 0;
}
.footer {
  bottom: 0;
  top: auto;
}
.content {
  background: blue;
  border: 1px solid cyan;
  box-sizing: border-box;
  height: 100%;
}
Csináltam egy demo-t is.
3

na ez a demo ez konkrétan

szabo.b.gabor · 2015. Feb. 6. (P), 15.31
na ez a demo ez konkrétan fájt :D

mindig ha pirosat és kéket raktok egymás mellé, valahol egy csillámpóni meghal.
4

köcce!

domel · 2015. Feb. 7. (Szo), 01.58
Hála nektek, össze is jött a telefonos vendégkönyvem,
vendégkönyv
igaz volt egy kis copy-paste is a dologban, de nagyjából értem a lényeget:
fix divek alul-felül, a mindent beborító div-nek meg egy bazinagy padding. Már azon gondolkodtam, hogy javascriptben kiszámítom a középső div magasságát, de ez így elegánsabb. Amúgy kirándulós helyen kirakott QR kódból lehet majd beírni a vendégkönyvbe a terveim szerint.
Köszi a segítséget, a meghalós csillámpónis szöveget én is bevetem majd a megfelelő helyen! :D