css - 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/

For the user this can be somewhat annoying since he has to go all the way to the bottom of the table and page to scroll right.

Is it possible to make the scrollbar always appear fixed on the bottom of the page?

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.