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:
  1. <table height="100%" width="100%">  
  2.   
  3.   <tr bgcolor="#0151df" height="50">  
  4.     <td>a</td>  
  5.   </tr>  
  6.   
  7.   <tr bgcolor="#61a1df">  
  8.     <td>b</td>  
  9.   </tr>  
  10.   
  11.   <tr bgcolor="#f1a1df" height="50">  
  12.     <td>c</td>  
  13.   </tr>  
  14. </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
  1. <div class="container">  
  2.   <div class="header"></div>  
  3.   <div class="content">bla</div>  
  4.   <div class="footer"></div>  
  5. </div>  
  1. .container {  
  2.   height: 100%;  
  3. }  
  4. .container {  
  5.   position: relative;  
  6.   box-sizing: border-box;  
  7.   padding: 50px 0;  
  8. }  
  9. .header, .footer {  
  10.   height: 50px;  
  11.   position: absolute;  
  12.   background-color: red;  
  13.   width: 100%;  
  14.   top: 0;  
  15. }  
  16. .footer {  
  17.   bottom: 0;  
  18.   top: auto;  
  19. }  
  20. .content {  
  21.   background: blue;  
  22.   border: 1px solid cyan;  
  23.   box-sizing: border-box;  
  24.   height: 100%;  
  25. }  
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