title: HTML/CSS - Fixed page borders with scrollable content
body: <p>I am trying to format my webpage so i can have a <code>border-left</code> and <code>border-right</code>. I want to have the border take up 100% of the page height even if the content on the page does not. </p>
  
  <p>I have been able to achieve this but, if content on the page exceeds 100% of the page height and the user must scroll, then the border does not fill the extra height on the page. </p>
  
  <p>How can I fix this with CSS?</p>
  
  <p>I am using Ruby on Rails, and I am adding my CSS to the <code>application.html.erb</code> file like so:</p>
  
  <pre><code>&lt;body&gt;
     &lt;div=borders&gt;
        &lt;%= yield %&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;style&gt;
     .borders {
        padding-top: 2%;
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 5%;
  
        height: 100%;
        border-left: 120px solid #808080;
        border-right: 120px solid #808080;
     }
  &lt;/style&gt;
  </code></pre>
  
  <p>This is an example from one of the pages on my site of what it looks like currently: </p>
  
  <p><a href="https://i.stack.imgur.com/sd2ro.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sd2ro.png" alt="enter image description here"></a></p>
  
  <p>If i remove the <code>height: 100%;</code> then the border will only fill as far as the page on the content goes. So if only 10% of the page is used then that is as far as the border goes. Like so:
  <a href="https://i.stack.imgur.com/xAYE1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xAYE1.png" alt="enter image description here"></a></p>