I would set the `overflow: hidden` on the body and add your site's content to a scrollable element. 

Your layout should look like this:



    <html>
    <head></head>
    <body>
        <div class="navbar"></div>
        <div class="wrap">
            
        </div>
    </body>
    </html>

Add these CSS rules:



    html, body {
        overflow: hidden;
        height: 100%;
    }
    body {
        padding-top: 50px;
    }
    .wrap {
        height: 100%;
        overflow: auto;
    }



### [Check out my fiddle](http://jsfiddle.net/gDLJm/4/)

I have a Bootstrap 3.0 navbar with that is always visible at the top of the page, but this could represent anything for which the `position` property is `fixed`.



    <nav class="navbar navbar-default navbar-fixed-top" >

Because fixing it takes it out of the document flow, I need to add some padding to the body element so the content isn't hidden when the page is first display



    body {
        padding-top: 70px;
    }

The problem is that when I click a menu item to navigate to a section, like `#About` then the top of the section is cut off.

[jsFiddle][fiddle]
====

*Q:* Is there a way to adding padding so that the full item will come into view when navigated to?

[fiddle]: http://jsfiddle.net/KyleMit/gDLJm/2/