Autor Zpráva
kolins54
Profil *
Dobrý den,

potřeboval bych vyřešit situaci, kdy mám dvousloupcový layout webu a jeho výška by měla být vždy 100% tak aby se na elementu <body> nezobrazoval scrollbar.

Výsledek by měl vypadat takto:
http://awesomescreenshot.com/0a22nwu4db

s tím že v levém sidebaru mám 3 boxy:
1. box má výšku, která se může měnit. Nechci u něj ovšem zobrazovat scrollbar
2. box má výšku, která se může měnit. Nechci u něj ovšem zobrazovat scrollbar
3. box by měl zabrat zbývající prostor na výšku od spodní hrany 2. boxu po spodní okraj monitoru a pokud se do něj obsah nevejde, měl by se zobrazit scrollbar

Samozřejmě, že se dostanu do problémů, pokud dva vrchní boxy budou mít výšku 500px a já budu mít okno prohlížeče např pouze 400px vysoké. To je ovšem situace, kterou neřeším. Vím, že vždy zbyde nějaký prostor pro 3. box a pokud ne, není splněno minimální rozlišení. Tuto situaci neřešme.


Je možné něco takového vyrešit POUZE pomocí CSS (CSS3) bez použití javascriptu? Pokud ano, můžete prosím poradit, případně poslat nějakou ukázku?


Děkuju,

P.
Bubák
Profil
Stačí CSS 2 (a prohlížeč IE8 a výše), nějak takto:
<table border=1 width=100% height=100%>
 <tr height=78>
  <td colspan=2>haviška</td>
 </tr>
 <tr>
  <td height=1 width=200>meňu</td>
  <td rowspan=2>
    <div style="height: 100%; overflow: auto">
    obšlah
    </div>
  </td>
 </tr>
 <tr>
  <td>
    <div style="height: 100%; overflow: auto">
    keci 
    </div>
  </td>
 </tr>
</table>
Ale namísto tabulky použít DIVy a patřičnými hodnotami display.
Pokud bys ponechal tabulku, stačí CSS 1 a při troše (zbytečné) snahy by to fungovalo i v IE5.
Plaváček
Profil
Bubák:

Je možná také dobré připomenout, že páchat podobné harakiri je zbytečné a kontraproduktivní. Jeden posuvník je až až. :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: