title: Prevent overlapping scrolling
body: <p>I have a design issue in my app, the body text is scrolling through my nav- and command line and i don't know how to fix it. I'm not looking for a z-index fix where the body text flows underneath, i want to restrict the lorem ipsum filler text upper scrolling to just below the command bar. The body text is huge, and scrolling is necessary. Currently it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/uII87.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uII87.png" alt="enter image description here"></a>
  Navbar CSS: </p>
  
  <pre><code>position: fixed;
  width: 100%;
  top: 0;
  </code></pre>
  
  <p>Command Line:</p>
  
  <pre><code>margin-bottom: 60px;
  </code></pre>
  
  <p>Body Text:</p>
  
  <pre><code>position: relative;
  min-height: 1px;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
  float: left;
  </code></pre>
  
  <p>I'm using Microsofts ui-fabric grid system, and can post more code if necessary. But i was hoping there would be an easy "set vertical scrolling breakpoint for this div at x pixels from top" - or something like that. But i can't seem to find anything.</p>
  
  <p>I guess i don't understand this well enough, so if someone can explain the big picture of how to resolve this scrolling issue, that would be helpful.</p>