Create a scroll bar for the page instead of div

Question

Using bootstrap 4 I created a page with a side navigation menu. There is a very wide table on the right side bottom of the page. I can create a div scroll bar by using

overflow: scroll;

However, when the table contains 100 rows, a user will have to scroll all the way down to access the scroll bar. Is there a way to create a scroll bar at the bottom of the browser window so it's available all the time? The sample code is here: https://jsfiddle.net/calnastic/0ncsofa6/4/

Please widen the page in the sample so the navigation menu can be displayed.

Thank you.

Answer 1

Here is what I suggest you, you can fix an height it can be as per your requirement and then let the items be 100 or more than that, eventually the data overflows and you will have your vertical scroll since you have fixed the height. Horizontal scroll will be seen only when the data of the row increases i.e. it's width and you can see your scroll within the website than scrolling it to the bottom.

I just shared an example of what I mean hope it helps(view in Full Screen for clear picture:

#MainDiv {
  height: 500px;
  width: 1000px;
  display: flex;
  flex-direction: row;
}

#leftMenu {
  height: 300px;
  width: 200px;
  border: 1px solid black;
}

#rightContent {
  height: 300px;
  /*fix your height here based on your website height*/
  width: 690px;
  border: 1px solid red;
  overflow: scroll;
  /*you can see the scroll only the width reaches its                          limit(690px in our case */
}

table {
  width: 690px;
}

td {
  width: 1000px;
  border: 1px solid black;
}

<div id="MainDiv">
  <div id="leftMenu">Left content

  </div>
  <div id="rightContent"> Right Content
    <table>

      <tr>
        <td>row1</td>
      </tr>
      <tr>
        <td>row2</td>
      </tr>
      <tr>
        <td>row3</td>
      </tr>
      <tr>
        <td>row4</td>
      </tr>
      <tr>
        <td>row5</td>
      </tr>
      <tr>
        <td>row6</td>
      </tr>
      <tr>
        <td>row7</td>
      </tr>
      <tr>
        <td>row8</td>
      </tr>
      <tr>
        <td>row9</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row..</td>
      </tr>
      <tr>
        <td>row-N</td>
      </tr>
    </table>
  </div>
</div>