JS滾動條與流體高度

我想一個div的滾動條蒙山流體高度個性化：JS滾動條與流體高度

section { 
max-height:70%; 
overflow-y:auto; 
}

我發現兩個智能光片段：一個jQuery插件（http://baijs.nl/tinyscrollbar/）和純JS一個（http://gondo.webdesigners.sk/javascript-scrollbar/）。問題是這些片段不能接受高度的％值。例如，對於tinyscrollbar，我必須把這個：

section .viewport { 
width: auto; 
height:440px; 
overflow: hidden; 
position: relative; 
}

如果我把「身高：100％;」或「高度：自動」，內容消失！爲什麼它接受px而不是％？我想了解它...

爲了插入節的流體高度，我應該更改/添加JS/JQuery代碼的哪一部分？

來源

2012-11-11 etn

在什麼情況下，該元素的高度會發生變化？ –

高度會根據如下變化： - 內容的大小（例如，如果我把三行文本的高度設置爲60px，但如果我放置1000行文本，高度不會超過屏幕的70％）。 - 用戶窗口或媒體的大小（例如，如果它是600x480，則最大高度應爲336px，如果是1024x768，則最大高度應爲538px）。 – etn

因此，更改發生時（1）內容更改時，（2）瀏覽器窗口重新調整大小。您可以重新初始化這些事件的滾動機制。 –

如果沒有更多的示例代碼（習慣於發佈更多的代碼請不要猶豫），但我認爲這樣的事情就是你要做的。 ---爲什麼不跟蹤上下文（outer div？）的高度和內部div（section）的高度，並在它們改變時計算它們？

var context_height = $("#context_div").height(); 
var section_height = $("section#id").height(); 

var percentage = section_height/context_height; 
var measurement = percentage + "%"; 

$(section_height).css("height", measurement); // trigger this with a callback if heights need updating - possibly even re-initializing any scroll plugins, if necessary.

來源

2012-11-12 04:50:34 Stone

感謝您的幫助！外部div是#container {position：relative; height：auto！important; min-height：100％;}。因此，

的{max-height：70％;}表示窗口高度的70％。（我不確定你的「section＃id」：我不應該寫「section.viewport」而不是？） – etn

當然，你可以這樣做。如果您在HTML元素部分設置了ID，Section＃id就是您可以做的一個例子。對於這個例子，他們會給你相同的結果。 – Stone

JS滾動條與流體高度

回答

相關問題