Deux divs se déroule indépendamment

J'ai besoin d'aide pour faire de ces deux <div>'s (#side-nav et #content-wrapper) pour faire défiler de manière indépendante,

HTML:

<div id="wrapper">
    <div id="top-nav">
        Top nav
    </div>
    <div id="side-nav">
        <ul>
            <li>Thing</li>
            <li>Thing</li>
        </ul>
    </div>
    <div id="content-wrapper">
        <!-- Ton of conent here -->
    </div>
</div>

CSS:

#wrapper {
  width: 100%;
  background-color: #fff;
}

#top-nav {
  position: fixed;
  top: 0;
  height: 60px;
  width: 100%;
  background-color: green;
}

#side-nav {
  position: fixed;
  width: 250px;
  height:100vh;
  overflow-y: scroll;
  background-color: red;
}

#content-wrapper {
  margin: 60px 0 0 250px;
  padding: 0 30px;
  overflow-y: scroll;
  background-color: blue;
}

maintenant, si j'ai faites défiler la #side-nav à la fin ou en haut, #content-wrapper de défilement de trop. #side-nav doit rester plein-hauteur de la page et fixe, même si il n'y a pas beaucoup de <li>'.

J'ai vite fait stylet ici:

http://codepen.io/blizqery/pen/QbZzRN

Merci!

C'est parce que content-wrapper ne pas faire défiler; c'est le corps qui est de défilement. Vous devez définir une hauteur de content-wrapper qui est inférieure à la hauteur de son contenu pour être en mesure d'utiliser overflow-y.
Le problème vient du fait que votre contenu-wrapper n'est PAS de défilement. C'est l'ensemble de la page de défilement... (nav du bac!) Pour le résoudre, il suffit d'ajouter une hauteur fixe à votre contenu-wrapper (comme votre côté-nav)... !
ajouter height:100vh; à votre #content-wrapper. L'ai fait et cela a fonctionné
Le problème appreas parce que vous lui avez dit de mettre une barre de défilement, mais pas à partir de ce point
vous venez de problème avec la hauteur du contenu-wraper div

OriginalL'auteur Ladislav Tomsa | 2015-07-27

  1. 9

    Vérifier: http://codepen.io/anon/pen/xGyMjM

    Vous avez besoin pour régler la hauteur de contenu-wrapper, et aussi de mettre la gauche, la droite & top.

    #side-nav {
  position: fixed;
  width: 250px;
  height:100vh;
  left: 0;
  right: 0;
  overflow-y: scroll;
  background-color: red;
  top: 60px;
}

#content-wrapper {
  margin: 60px 0 0 250px;
  padding: 0 30px;
  overflow-y: scroll;
  position: fixed;
  left: 0;
  top: 0;
  height:100vh;
  background-color: blue;
}
    Cela fonctionne bien, mais maintenant il ne marche pas afficher tout le contenu et le menu <li>'. Il les cache au fond.
    Oui, c'est la question à cause de px & vh - ils ne sont pas la synchronisation de bien ensemble. Ce problème existe aussi dans notre CodePen. vous devez définir la fenêtre d'affichage de la hauteur, en pixels, par le calcul de la hauteur de la fenêtre - 60 (en haut à nag hauteur) => à la même hauteur pour les deux (côte-nav & contenu). Laissez-moi savoir si vous avez besoin d'aide, je peux créer un CodePen
    Je viens de remplacer toute la hauteur:100hv; hauteur: calc(100% - 60px); et il fonctionne bien merci.
    Si elle les aide, pourriez-vous s'il vous plaît jusqu'vote & puis le marquer comme réponse, merci.

    OriginalL'auteur Surya Chandra Rao Gandreddi

  2. 0

    Je crois que ce qui fonctionne pour votre question

       body{
      margin:0px;
    }
    #top-nav {
      position: fixed;
      top: 0;
      height: 10vh;
      width: 100%;
      background-color: green;
    }
    #wrapper {
      width: 100%;
      background-color: #fff;
    }

    #side-nav {
      float:left;
      width: 250px;
      height: 90vh;
      overflow-y: scroll;
      background-color: red;
    }

    #content-wrapper {
      margin: 10vh 0 0 250px;
      padding: 0 30px;
      overflow-y: scroll;
      background-color: blue;
      height:90vh;
    }

    OriginalL'auteur NAND