How to make always visible scroll in HTML 5?

Question

I have enormous table to render on website. I need to make it scroll horizontally. Normally I would set fixed width and overflow: scroll but not in this case. The table is pretty tall so I don't see scroll at the bottom of web browser.

Demo: http://jsfiddle.net/cpmjng5b/1/embedded/result/

I could set fixed height but I have text before table that height is dynamic.

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

What should I do? Try to calculate div.container height in JS? I already tried floating scroll plugin for jQuery but it is relatively slow. Can I make it in pure css somehow?

Answer 1

This solution is using jquery, but you could also do it with javascript.

1. Calculate the height of your window and subtract the height of the dynamic text.
2. Take that number and make it the max-height of your div surrounding the table.

The height in the fiddle is a little off due to the jsfiddle "Result" header, but you can add/subtract any additional pixels if you have a top navigation.

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

fiddle