| Autor | Zpráva | ||
|---|---|---|---|
| kolins54 Profil * |
#1 · Zasláno: 16. 4. 2014, 14:58:52
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 |
#2 · Zasláno: 16. 4. 2014, 15:40:58
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>Pokud bys ponechal tabulku, stačí CSS 1 a při troše (zbytečné) snahy by to fungovalo i v IE5. |
||
| Plaváček Profil |
#3 · Zasláno: 16. 4. 2014, 15:42:22
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ž. :) |
||
|
Časová prodleva: 10 let
|
|||
0