How can I make the horizontal scrollbar for a DIV always appear fixed on the bottom of the page?

Question

I have a website which contains a large (and wide) table. The table is placed inside jquery UI tabs.

It looks something like this: http://jsfiddle.net/Tq3Rg/

Answer 1

Set a fixed height (and don't use inline-styles):

Your altered Demo

the code:

.top{
   height:10%;
}
.center{
   overflow:scroll;
   height:80%;
}
.bottom{
   height:10%;
}

If you really want to have the scrollbars at the very bottom of your page, you could check this answer on how to achieve this without needing custom scrollbars and such stuff.

Answer 2

You need a custom scrollbar to do this, have a look http://baijs.nl/tinyscrollbar/ or http://www.jquery4u.com/plugins/10-jquery-custom-scrollbar-plugins/#.T_RSYxEe4hU.

Answer 3

Just set some fixed height to your middle div like

<div style="background:white;overflow-y:scroll;height:400px;">