Scrolling Div without fixing other elements

http://ift.tt/2bIthvJ

<div class="col-10 content" id="content">
         <ul>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
        </ul>
        </div>

.content
{
      overflow:auto;
      overflow-x:hidden;
      height:96%;
      width:100%;
    }

Hello, I created a Div which includes plenty of News. I want the Div to scroll but the header and the left-menu to stay fixed. My Div is scrollable but just if the mouse-pointer is inside it. I actually want it to scroll always no matter where the cursor is and i want to have the scroll bar visible. I tried a few things but could help myself. Is there another way to do this except of styling all the other elements fixed ?

Thanks Markus