如何在HTML 5中始终显示滚动？

Question

我在网站上有大量的表格。我需要让它水平滚动。通常情况下，我会设置固定width和overflow: scroll，但在这种情况下不会。桌子很高，所以我看不到网页浏览器底部的滚动。

演示：http://jsfiddle.net/cpmjng5b/1/embedded/result/

我可以设置固定height，但我在表格之前有文字表示高度是动态的。

http://jsfiddle.net/cpmjng5b/5/embedded/result/

我该怎么办？尝试在JS中计算div.container高度？我已经为jQuery尝试floating scroll plugin，但它相对较慢。我可以用某种方式在纯粹的CSS中制作吗？

Answer 1

此解决方案使用jquery，但您也可以使用javascript。

1. 计算窗口的高度并减去动态文本的高度。
2. 取出那个数字并使其成为桌子周围div的最大高度。

小提琴的高度有点偏差，因为jsfiddle＆＃34;结果＆＃34;标题，但如果您有顶部导航，则可以添加/减去任何其他像素。

var viewportHeight = $(window).height();
var topcontentHeight = $(".dynamicText").height();
$(".container").css("max-height", (viewportHeight - topcontentHeight) + 'px');

fiddle