title: How to get text from scrolling off bottom of container, yet keep scroll bar on far right of browser?
body: <p>How can I get the following site to work so that if the text is longer than the container, (1) the <strong>text does not scroll off the bottom</strong>, and (2) the <strong>scrollbar is on the right side of the browser</strong> and not on the right side of the container?</p>
  
  <p>(The reason I want the scrollbar on the right side of the browser is because if it is on the right side of the container, then the mouse-wheel does not work when the cursor in on the gray area, which is a disconcerting user experience.)</p>
  
  <p><a href="https://i.stack.imgur.com/x30sZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x30sZ.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;         
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
          &lt;script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;     
          &lt;style type="text/css"&gt;      
  
              .pagecontent {
                  margin: 0 18px;
              }
  
              /* bootstrap override */
              .container {
                  width: 100%;
                  padding: 0;
              }
              .navbar {
                  border-radius: 0px;
              }
  
              .navbar-text {
                  float: left !important;
                  margin-right: 10px;
              }
              .navbar-right {
                  float: right!important;
              }
  
              .navbar-nav&gt;li&gt;a {
                  padding-top: 15px;
  
                  padding-bottom: 15px;
              }
  
              .navbar-nav {
                  margin-bottom: 0;
                  margin-top: 0;
                  margin-left: 0;
              }
  
  
              /* viewport lg */
              @media (min-width: 1200px) {
                  .container {
                      width: 1024px;
                      padding: 0;
                      background-color: #fff;
                      position:absolute;
                      top:0;
                      bottom:0;
                      left:0;
                      right:0;
  
                      /* overflow-y: auto; TEXT DOESN'T EXTEND OFF BOTTOM (GOOD), BUT SCROLL BAR IS ON CONTAINER NOT ON RIGHT OF BROWSER (BAD)*/
                  }
                  html{
                      min-height:100%;/* make sure it is at least as tall as the viewport */
                      position:relative;
                  }
                  body{
                      height:100%; /* force the BODY element to match the height of the HTML element */
                      background-color: #999;
                      /* overflow-y: auto; SCROLLBAR ON RIGHT OF BROWSER (GOOD) BUT TEXT EXTENDS OFF BOTTOM (BAD) */
                  }
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div class="container"&gt;
              &lt;nav class="navbar navbar-inverse"&gt;
                  &lt;div class="container-fluid"&gt;
                      &lt;div class="navbar-header pull-left"&gt;
                          &lt;a class="navbar-brand" href="?"&gt;Bootstrap Showcase&lt;/a&gt;
                      &lt;/div&gt;                
  
                  &lt;/div&gt;
              &lt;/nav&gt;
              &lt;div class="pagecontent"&gt;
  
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
                  &lt;div&gt;this is a test line&lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>ADDENDUM</h1>
  
  <p>If I remove <code>position: absolute;</code>, it fixes this immediate problem but then the container does not extend down to the bottom if there is not enough text, as it does correctly when there is no gray background:</p>
  
  <p><a href="https://i.stack.imgur.com/kflvF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kflvF.png" alt="enter image description here"></a></p>