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?

Related: https://stackoverflow.com/questions/45368273/making-horizontal-scrollbar-always-visible-even-if-bottom-is-out-of-view — Ciro Santilli OurBigBook.com, Nov 15 '21 at 10:26

score 12 · Accepted Answer · edited May 23 '17 at 12:24

12

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.

edited May 23 '17 at 12:24

Community

1
1

answered Jul 04 '12 at 14:22

Christoph

50,121
21
99
128

I don't know any browser with that behavior. Do you mind elaborating? – Christoph Sep 27 '16 at 21:32

score 1 · Answer 2 · answered Jul 04 '12 at 14:16

1

Just set some fixed height to your middle div like

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

answered Jul 04 '12 at 14:16

score 0 · Answer 3 · answered Jul 04 '12 at 14:26

0

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.

answered Jul 04 '12 at 14:26

Ashwin Singh

7,197
4
36
55

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

3 Answers3

Linked