Horizontal Scrollbar Only Appearing at Bottom of Page

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;
}

Why is a horizontal scroll bar appearing if none of the elements are wider than the 960px container?

Try add overflow hidden:

#main_wrap{
    margin:0 auto;
    width:960px;
    position:relative;
    overflow: hidden;
}

That should work (but is hacky).

Table inside a div - horizontal scrollbar only at the bottom of the div

How about something like this?

$("#scrollbar").on("scroll", function(){  var container = $("#container");  var scrollbar = $("#scrollbar");    ScrollUpdate(container, scrollbar);});
function ScrollUpdate(content, scrollbar){    $("#spacer").css({"width":"500px"}); // set the spacer width    scrollbar.width = content.width() + "px";    content.scrollLeft(scrollbar.scrollLeft());}
ScrollUpdate($("#container"),$("#scrollbar"));
$("#tab").tableHeadFixer({  "left": 1,  "right": 0,  "head": true});

#container {  width: 300px;  height: 300px;  background: green;  overflow-x: hidden !important;  overflow-y: auto;  position: absolute;  left: 0px;  top: 0px;}
#scrollbar {  position: fixed;  left: 0px;  bottom: 0px;  width: 300px;  overflow-x: scroll;  overflow-y: hidden;  z-index: 10;}
#spacer {  height: 1px;}
#tab {  width: 500px;  height: 500px;  background: #CCCCCC;}
tr,td {  border: 1px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><body>
<div id="scrollbar"><div id="spacer"></div></div>
<div id="container">  <table id="tab">    <thead>    <tr>     <th>Title</th>     <th>Name</th>     <th>History</th>    </tr>   </thead>   <tbody>    <tr>     <td>test</td>     <td>test</td>     <td>test</td>    </tr>    <tr>     <td>test</td>     <td>test</td>     <td>test</td>    </tr>    <tr>     <td>test</td>     <td>test</td>     <td>test</td>    </tr>    <tr>     <td>test</td>     <td>test</td>     <td>test</td>    </tr>   </tbody>  </table></div>

Horizontal Scrollbar Only Appearing at Bottom of Page

Horizontal scrollbar only appearing at bottom of page

Why is a horizontal scroll bar appearing if none of the elements are wider than the 960px container?

Table inside a div - horizontal scrollbar only at the bottom of the div

Related Topics

Leave a reply