Overflow problēma

[EdgarsK]

<style>
#input { width:500px;height:600px;overflow-y:scroll;position:relative;display:block; }
</style>
<div id="left"> ... </div>
<div id="content">
<div id="toolbox"> ... </div>
<div id="toolbox2"> ... </div>
<div id="input"> Mans saturs </div>
<div id="bottombox"> ... </div>
</div>
<div id="right"> ... </div>

 

Tātad, man ir šāds neliels html paladziņš, ar diezgan garu saturu zem #input.

Šim #input ir jābūt Overflow-y:scroll, bet ar mērķi, lai scroll neparādās līdz bridim, kamēr tie ir fiziski vajadzigi.

 

Ir kādi ieteikumi kā veikt šo darbibu ar pliku css?

[briedis]

Ar pliku css, šaubos vai var.

Ar jquery var noskaidrot elementa augstumu. Kad augstums sasniedz redzamā loga augstumu, tad piemetam skruļļbārus...

Edited August 5, 2010 by briedis

[EdgarsK]

$(function(){
if($("#input").height() > 600){ $("#input").css({'overflow-y':'scroll'}); }
});

ja nemaldos ?

Edited August 5, 2010 by EdgarsA

[Леший]

innerHeight, nevis height, jo height atgriezīs tev "600px", kuru nevarēsi salīdzināt ar (int)600

[briedis]

Principā jā (nekad tā neesmu darījis, bet imo vajadzētu strādāt :D)

 

Vienīgi, ja saturs mainās dinamiski - būs vajadzīgs kāds events, kas nočeko, kad pielikt, kad noņemt skrulli.

Vēl jau šitais būtu jāliek iekš document ready...

[briedis]

innerHeight, nevis height, jo height atgriezīs tev "600px", kuru nevarēsi salīdzināt ar (int)600

 

The difference between .css('height') and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .height() method is recommended when an element's height needs to be used in a mathematical calculation.

[EdgarsK]

innerHeight arii atgriez 600px

[EdgarsK]

Aha skaidrs, css janorada nevis "height:600" bet "min-height:600" savadak jquery doma ka tikties ir 600.