Fixed top + bottom navbars with scrollable content in between

Question

I'm using Bootstrap and need to have 2 fixed nav bars, top and bottom. The content between them gets long and needs to have a scrollbar. The thing is that the scrollbar appears on the entire screen while I want it to be on the content only:

<div>
    <div class="navbar navbar-blend navbar-fixed-top">
        <div class="row">
             <div class="col-xs-9 col-md-9"><span>Text top</span></div>
        </div>
    </div>
    <div id="content">
        <div class="container">
            <div>                
                <div class="row">
                    <div class="col-xs-12 col-md-12"><p>Row1</p></div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-md-12"><p>Row2</p></div>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar navbar-blend navbar-fixed-bottom">
        <div class="nav"><span>Text buttom</span></div>
    </div>
</div>

See it here: JSFiddle

I've been following some answers to similar questions (here and here, for instance), but none of them has worked. I'm probably missing something.

In my JSFiddle you see my original version, since none of the suggested fixes worked for me.

Can you assist?

Answer 1

The content of your page needs to be in a separate div that does not take up any portion of the screen that overlaps with your top and bottom nav bars. In your case, you need to add position: fixed to your content, then make sure it doesn't occupy the top and bottom areas.

Adding the following CSS should work:

#content {
    position: fixed;
    top: 80px;
    bottom: 80px;
    left: 0;
    right: 0;
}

jsFiddle