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滚动条与流体高度

回答

相关问题