How to Make the Horizontal Scrollbar for a Div Always Appear Fixed on the Bottom of the Page

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

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.

Fixing the horizontal scrollbar of a div to the bottom of a page

Yes, its obvious. You had set overflow: auto; to the div. It will surely display a horizontal/vertical scroll bar whenever its content goes beyond its bound. If you really want to remove that scroll bar from that div and set it to the browser, just remove that piece of css from that div and simply add it to the body.

DEMO

Horizontal scrollbar only appearing at bottom of page

Its because your document (body) isnt stretched to the full height of the viewport (html), you need to assign height:100vh, also remove your overflow settings so you dont get 2 scrollbars appearing (one on body one on html).

Simply change your CSS to:

html,body{
  height:100vh;
  width:100vw;
  margin: 0;
  padding: 0;
}

---

Related Topics