web-dev-qa-db-fra.com

Placez div sous la barre de navigation et ne recouvrez pas le contenu

Mon problème est que j'ai fixé une barre de navigation en haut de ma page Web, qui comprend les deux marges latérales et une en haut. Sous cette barre de navigation, je souhaite définir un conteneur à défilement.

Permettez-moi de dire que j'utilise Bootstrap 3.2.0 pour structurer le site.

Le problème est qu’en raison des marges de ma barre de navigation, le contenu que je veux mettre en dessous chevauche la barre de navigation et il est affiché à côté de la barre de navigation. Pour une meilleure explication de ceci, je vous fournis mon code et un exemple concret:

UPDATE: J'ai remarqué quelque chose qui augmente un peu la difficulté de mon point de vue, et c'est que le corps a une règle pour cacher le défilement et ne le laisse pas défiler:

Je voudrais juste faire défiler le contenu "Hi World" et évidemment que tout le contenu soit affiché depuis le premier mot: "BEGIN" à "FIN" avec le défilement de mot.

body {
   overflow: hidden;
}

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

<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>

UPDATE 2:

En expérimentant avec vos réponses et mes propres recherches, j’ai réalisé quelque chose qui me rapproche du travail, j’ai un parchemin pour la div avec le contenu situé sous le menu de navigation et le contenu ne se chevauche pas.

Le problème est que j'ai aussi un pied de page fixe à la page. Si je redimensionne la fenêtre, le défilement n'est pas complètement visible et je ne peux pas atteindre la fin de la liste car il est recouvert par le pied de page, alors ne me laissez pas voir. la fin du parchemin, si je supprime le pied de page, évidemment, il est visible.

Mais je dois ajuster mon parchemin pour commencer au bas du menu de navigation supérieur et se terminer en 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 recherche quelque chose comme ceci pour mon conteneur, veuillez consulter le lien suivant:

Contenu avec 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 en ce qui concerne la mise à jour 2, le problème était si simple à résoudre, peut-être que je ne l'ai pas vue . En gros, de la même manière, j'ai ajouté un rembourrage sur le dessus du corps pour placer mon conteneur principal sous le haut. menu de navigation, je dois faire exactement la même chose, mais avec le remplissage inférieur du corps pour définir mon conteneur principal au-dessus du menu de navigation inférieur.

De plus, je règle la hauteur à 100% pour mon conteneur principal de manière à ce qu'il s'étende le long de la division entière 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.

htmlcsscss3twitter-bootstraptwitter-bootstrap-3
11
Joe Lewis

Je n'aime vraiment pas avoir à ajouter des éléments qui ne sont là que pour faire passer du contenu. C'est ce que le positionnement est conçu pour gérer. La meilleure façon de le faire est de commencer par ajouter un rembourrage en haut de votre corps, comme @davidg l'a indiqué dans sa réponse. De plus, pour déplacer votre barre de navigation en position, n'utilisez pas de marges. Utilisez plutôt les propriétés top, left et right. La classe navbar-fixed-top définit déjà la position sur fixed, vous n'avez donc pas besoin de donner de valeur à la propriété position. J'ai également ajouté la classe container-fluid à votre div (afin que vous obteniez un peu de remplissage à l'intérieur) et une classe personnalisée pouvant défiler pour définir la propriété overflow.

DEMO

CSS:

html, body {
  height: 100%; /*Fixes the height to 100% of the viewport*/
}
body {
  padding-top: 87px; /*50px for the height of the navbar + 37px for the offset*/
  padding-bottom: 50px; /*50px for the height of the bottom navbar*/
}
.navbar-offset {
    top: 37px; /*Offsets the top navbar 37px from the top of the viewport*/
}
.container-fluid.scrollable {
  height: 100%; /*Sets the scrollable area to 100% of the viewport*/
  overflow: auto; /*Allows the scrollable area to have a scrollbar based on the height of its content*/
  background: #ccc;
}

HTML:

<nav class="navbar navbar-default navbar-fixed-top navbar-offset">
    <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 scrollable">
    <p>BEGIN</p>
    <p>Hi World</p>

    ...

    <p>END</p>
</div>


<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-calendar"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-comment"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
    </ul>
</nav>
8
jme11

À partir de Documentation Bootstrap :

Body padding required La barre de navigation fixe superposera votre autre contenu, sauf si vous ajoutez un remplissage en haut du <body>. Essayez vos propres valeurs ou utilisez notre extrait ci-dessous. Conseil: Par défaut, la barre de navigation a une hauteur de 50 px.

Alors ajoutez simplement votre rembourrage corporel:

body
{
    padding-top: 70px;
}

Si vous ne voulez pas que votre corps défile derrière la barre de navigation, changez votre CSS pour qu'il utilise padding au lieu de margin:

.my-own-style {
    padding-left: 37px;
    padding-top: 37px;
}
8
DavidG

Vous devez déplacer le div qui défile avec un div fixe devant lui:

http://www.bootply.com/3UpMI5yTIA

.scroll-pre {
  height: 100px;
  width: 100%;
  background-color: inherit;
  position: fixed;
}

Et 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-pre"></div>
<div class="scroll">
    <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>
       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>
       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>
       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>
       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>
       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>
       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>
       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>
       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>
       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>
       Hi World
    <p>Hi World</p>
</div>

MODIFIER

http://www.bootply.com/CKD9nrQxG5

Si vous voulez faire défiler le div (pas sur la page), ajoutez la classe "scroll" à votre div qui défile et mettez à jour css avec:

body, html {
  overflow: hidden;
  height: 100%;
}

.scroll {
  margin-top: 100px; // Same as .scroll-pre height
  overflow: auto;
  height: 100%;
}

EDIT 2 (pied de page)

http://www.bootply.com/JwmaWgvWPI

Si vous voulez un pied de page, la stratégie est la même, placez un div fixe dans bottom:0. Encore une fois, cela ne fonctionnera que si vous placez un arrière-plan sur les divs pré-défilement et pied de page.

J'ai ajusté les champs du défilement pour que le dernier élément soit visible.

.scroll {
  margin-top: 100px;
  overflow: auto;
  height: 100%;
  padding-bottom:130px;
  margin-bottom: 30px;
}

.footer {
  position:fixed;
  bottom:0;
  height:30px;
  background:inherit;
  width:100%;
}
3
Miquel

vous pouvez simplement résoudre ce problème en mettant à jour vos marges avec des rembourrages .. et mettre à jour la div comme ci-dessous ..

HTML

<div id="content">....</div>

CSS

#content{
  position:absolute;
  top:100px;
}

Démo

2
Aru

Vous pouvez essayer les codes suivants:

Code HTML: 

<nav class="navbar navbar-default">
.......
</nav>

Code CSS: 

.navbar{
border-radius: 0;
}
0
Nimesh Nayaju