DIV défini pour déborder: défile, mais ne défile pas jusqu'au fond

J'ai un DIV menu qui est à 100% de la hauteur avec une overflow:scroll. Dans le DIV j'ai un ul li. Le problème que j'ai, c'est qu'il ne me laissera pas faire défiler tout le chemin vers le bas pour voir la dernière li. Je peux à peine voir.

Je pense qu'il a quelque chose à faire avec mon en-tête parce que quand j'ai supprimer l'en-tête, je peux le voir. Lorsque j'ai remis la tête, il passe sous le navigateur et ne peut pas faire défiler tout le chemin vers le bas pour voir la dernière li.

Les deux li et d'en-tête sont presque identiques en hauteur et il fait beaucoup de sens, que l'en-tête est à l'origine du problème. Pas l'en-tête en particulier, je pense, mais plus de quelque chose que je fait en CSS.

Pourquoi ne puis-je pas faire défiler tout le chemin vers le bas? Quelle est la solution?

Exemple ici: http://jsfiddle.net/D5KU3/2/

<div class="container">

<!--header-->
 <div class="header">
 </div>
<!--end header-->

<!--left-->
 <div class="left">

<!--ul starts here-->

  <ul>

  <li class="hybrid">

    <a href="#">
    <p class="title">Why Cant</p>
    <p class="type">I scroll all the way to the bottom</p></a>

  </li>

Répéter li 20 fois

  </ul> <!--ul ends here-->

  </div> <!--container ends here-->

CSS 

  body, html {
  height:100%;  
  }

  body {
  background:white;

  }

  .container {
  width:260px;
  height:100%;
  overflow:hidden;
  background:silver;
  margin:0 auto;
  font-family:sintony;
  }

  .header {
  width:100%;
  height:60px;
  background:#000;
  }

  .left {
  width:260px;
  height:100%;
  background:#fff;
  float:left;
  overflow:scroll;
  }


 li.hybrid a {
 display:block;
 background:#16BF14;
 height:60px;
 width:260px;
 text-decoration:none;
 position:relative;
 }



 li.purple a {
 display:block;
 background:#3370CC;
 height:60px;
 width:260px;
 text-decoration:none;
 position:relative;
 }

 p.title {
 position:relative;
 padding-left:10px;
 }

 p.type {
 font-size:12px;
 position:relative;
 padding-left:10px;
 }

 ul {
 margin:0;
 padding:0;
 }

 li p {
 margin:0;
 padding:0;
 list-style-type:none;
 }

source d'informationauteur user3025512

  1. 6

    Que vous avez à la fois l'en-tête et à gauche des éléments dans le conteneur, et la gauche de l'élément est de 100% des conteneurs, ceux-ci sont 100% plus de 60 pixels de l'ensemble.

    Vous pouvez faire de la place pour l'en-tête en utilisant box-sizing et padding-top dans le conteneur. Qui fera la taille intérieure du récipient de 100% à moins de 60 pixels. Ensuite, utilisez une valeur négative de la marge supérieure sur l'en-tête pour la placer sur le dessus de cela un rembourrage:

    .container {
    box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    -webkit-box-sizing: padding-box;
    padding-top: 60px;
}

.header {
    margin-top: -60px;
}

    Démo: http://jsfiddle.net/Guffa/D5KU3/11/

    Vous pourriez aussi vous voulez vous débarrasser de la marge de la page, sinon le 100% des conteneurs, et la marge est plus grande que la fenêtre:

    body {
    margin: 0;
    padding: 0;
}
  2. -1

    je recommanderais suivantes

    .left {
  position:absolute;
  width:260px;
  top:60px;
  height:100%;
  background:#fff; 
  overflow:scroll;  
}

    http://jsfiddle.net/D5KU3/8/

  3. -2

    C'est en fait tout à fait logique que vous avez de votre corps et de html jeu à 100%. Cela signifie que le contenu du corps ne peut pas être supérieur à l'espace disponible dans votre navigateur, et si vous ne voyez pas le fond.

    Si vous supprimez cette CSS, le problème est résolu; bien qu'il pourrait être préférable de définir le corps de min-height: 100%. De cette façon, la hauteur de la page sera toujours le remplir l'espace disponible; à moins que son contenu est plus que cela.

    Une des mises à jour jsfiddle: http://jsfiddle.net/D5KU3/3/

  4. -2

    Supprimer la overflow: hidden; de .container classe

    .container {
  width:260px;
  height:100%;
  background:silver;
  margin:0 auto;
  font-family:sintony;
}

    http://jsfiddle.net/atYpX/