CODEWITHSUNDEEP
css
Andreas Larsson
Andreas Larsson

Reputation: 565

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

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?

Upvotes: 10

Views: 29935

Answers (3)

Christoph
Christoph

Reputation: 51201

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.

Upvotes: 12

Ashwin Singh
Ashwin Singh

Reputation: 7355

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.

Upvotes: 0

user1432124
user1432124

Reputation:

Just set some fixed height to your middle div like

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

Upvotes: 1

Related Questions