Mettre des div en dessous de la barre de navigation et ne se chevauchent pas de contenu

Mon problème est que je me fixe une barre de navigation en haut de ma page et il comprend à la fois les marges latérales et haut. En dessous de cette barre de navigation, je veux mettre un défilement conteneur.

Permettez-moi de dire que je suis en utilisant Bootstrap 3.2.0 pour aménager le site.

Le problème est qu'en raison de la marge de ma barre de navigation, le contenu que je veux mettre en dessous de chevauchement de la barre de navigation et il est montré en plus de la barre de navigation. Pour une meilleure explication de ce que je vous donner mon code, et un exemple vivant:

Mise à JOUR: j'ai remarqué quelque chose qui augmente un peu difficile de mon point de vue, et c'est que le corps a une règle pour masquer les faire défiler et ne pas laisser de défilement haut/bas:

Je voudrais juste pour faire défiler le contenu "Bonjour tout le Monde" et bien évidemment que l'ensemble du contenu est indiqué à partir du premier mot: "COMMENCER", à la "FIN" mot de défilement.

body {
   overflow: hidden;
}

http://www.bootply.com/TZebvFEl3T (J'ai mis à jour le bootply code avec les restrictions).

<nav class="navbar navbar-default navbar-fixed-top my-own-style">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="divider-vertical"></li>
    <li><a href="#">More</a></li>
    <li><a href="#">Options</a></li>
   </ul>
</nav>

<div>
    <p>BEGIN</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
    ...
    <p>END</p>
</div>

Mise à JOUR 2:

À expérimenter avec vos réponses et mes propres recherches, j'ai réalisé quelque chose, il est près à travailler pour moi, j'ai un scroll pour la div avec le contenu ci-dessous le menu de navigation et maintenant, le contenu ne se chevauchent pas.

Le problème est que j'ai aussi un pied de page fixe à la page, si je redimensionner la fenêtre de défilement n'est pas entièrement visible et je ne peux pas atteindre la fin de la liste, car il est overlaped par le pied de page, afin de ne pas me laisser voir la fin du rouleau, si je retire le pied de page, évidemment, c'est visible.

Mais je dois ajuster mon faites défiler jusqu'à commencer au bas de la partie supérieure de nav menu, vers le haut de mon pied de page comme vous pouvez le voir dans l'exemple, le problème apparaît lorsque vous redimensionnez le navigateur.

Je pense que je suis à la recherche de quelque chose comme cela pour mon conteneur, veuillez jeter un oeil au lien suivant:

Contenu 100% entre en-tête et pied de page

Et voici mon code:

http://www.bootply.com/knJkGoEHWQ

HTML:

<nav class="navbar navbar-default navbar-fixed-top my-own-style">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="divider-vertical"></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
    </ul>
</nav>

<div class="container-fluid scroll">
    <p>BEGIN</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    ... 
    <p>END</p>
</div>

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">More</a></li>
     <li><a href="#">Options</a></li>
      </ul>
</div>

CSS:

/* CSS used here will be applied after bootstrap.css */

body, html {
    height: 100%;
    overflow: hidden;
    padding-top: 44px;
}

.my-own-style {
    margin-left: 37px;
    margin-top: 37px;
}

.scroll {
    overflow: auto;
    height: 80%;
    padding: 0;
    margin-left: 37px;
}

---

MISE À JOUR 3 (SOLUTION):

Ok pour la mise à jour 2, la question était tellement simple de faire le tri, j'ai peut-être pas le voir.
Fondamentalement de la même manière, j'ai ajouté un rembourrage sur la partie supérieure du corps pour définir mon conteneur principal ci-dessous le menu de navigation en haut, je dois faire exactement la même chose mais avec le remplissage en bas du corps pour définir mon conteneur principal au-dessus du fond du menu de navigation.

De plus, j'ai réglé la hauteur de 100% pour mon conteneur principal de cette manière, elle étendre à l'ensemble de la div qui le contient.

Voici la solution:

http://www.bootply.com/sazMMHNCGy

HTML:

<nav class="navbar navbar-default navbar-fixed-top my-own-style">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="divider-vertical"></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
    </ul>
</nav>

<div class="scroll">
    <p>BEGIN</p>
    <p>Hi World</p>
    Hi World
    <p>Hi World</p>
    <p>Hi World</p>
    Hi World
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    ...
    <p>END</p>
</div>

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">More</a></li>
     <li><a href="#">Options</a></li>
      </ul>
</div>

CSS:

/* CSS used here will be applied after bootstrap.css */

body, html {
    height: 100%;
    overflow: hidden;
    padding-top: 44px;
    padding-bottom: 25px;
}

.my-own-style {
    margin-left: 37px;
    margin-top: 37px;
}

.scroll {
    overflow: auto;
    height: 100%;
    padding: 0;
    margin-left: 37px;
}

Et pour moi c'est la solution que je cherchais.

OriginalL'auteur Joe Lewis | 2014-10-16