| Autor | Zpráva | ||
|---|---|---|---|
| peta Profil |
#1 · Zasláno: 24. 9. 2013, 07:40:39
Na jednom foru jsem objevil zajimavy dotaz. Neprisel jsem ale na duvod, proc se to tak chova.
<div style="overflow:auto;margin-left:100px;background-color:green;width:100px;min-height:200px;"> <p style="float:right;width:200px;background-color:red; "> block block block block block block block block block block block block block block block block block block <p> <div style="clear:right;color:#fff;">XXX</div> </div> Kdyz se float:right zameni za left, tak se ve FF objevi scrollbar, ale s right ne. Proc? Dela mi to i IE. Ten div clear jsem si tam doplnil navic, ale nic to nevyresilo. |
||
| kaktuss Profil |
scrollbar sa ti objaví preto, že tam máš overflow:auto, čiže akonáhle je niečo "mimo hranice", zobrazí sa scrollbar. Keby si nastavil overflow:hidden, tak sa scrollbar nezobrazí.
Doplnené: aj keď ti right posunie obsah mimo ľavej hranice, scrollbar sa zobrazí iba v prípade, ak obsah presahuje pravú hranicu. Chová sa to takto preto, lebo všetko je akoby zarované zľava. Aj keď okno browsera začneš zmenšovať z ľavej strany, tak keď sa ti zobrazí scollbar, stránka je zarovnaná zľava a obsah sa ti posunie mimo pravú hranicu okna. |
||
| margin Profil * |
#3 · Zasláno: 24. 9. 2013, 08:47:10
Něco podobného je skrytí elementu pozicováním mimo obrazovku (element BODY) nahoru nebo doleva. Tenhle trik je starý, profláknutý a kupodivu se nikdo nepozastavuje nad tím, že se scrollbar neobjevuje.
|
||
| peta Profil |
Je to uzivatelsky nelogicke. Jako, tve vysvetleni je ok, dava to smysl. Ono, zaporny scroll jsem vlastne nikdy nevidel :) Dela to i s position, kdyby si to nekdo chtel zkusit (ten scroll tam dela ten ramecek ve FF).
<style>
.a {overflow:auto;margin-left:100px;background-color:green;width:100px;min-height:100px;}
.b {width:200px;background-color:red; border:2px solid #08f;}
.ac {position:relative;}
.ba {float:right;}
.bb {float:left;}
.c {position:absolute;}
.ca {left:-100px;}
.cb {right:-100px;}
</style>
<div class="a">
<p class="b ba">
block block block block block block
<p>
<div style="clear:both;color:#fff;">XXX</div>
</div>
<hr>
<div class="a">
<p class="b bb">
block block block block block block
<p>
<div style="clear:both;color:#fff;">XXX</div>
</div>
<hr>
<div class="a ac">
<p class="b c ca">
block block block block block block
<p>
</div>
<hr>
<div class="a ac">
<p class="b c cb">
block block block block block block
<p>
</div> |
||
|
Časová prodleva: 10 let
|
|||
0