DIV настроен на переполнение: прокрутка, но не будет прокручиваться до конца

У меня есть меню DIV, для которого установлена высота 100% с помощью переполнения: прокрутка. В DIV у меня есть ul li. Проблема заключается в том, что она не позволит мне прокрутить весь путь вниз, чтобы увидеть последний li. Я почти не вижу его.

Я думаю, что это имеет какое-то отношение к моему заголовку, потому что когда я удаляю заголовок, я могу это увидеть. Когда я возвращаю заголовок, он попадает под браузер и не может быть прокручен до конца, чтобы увидеть последний li.

Оба li и заголовок почти идентичны по высоте, и имеет большое значение, что заголовок вызывает проблему. Я думаю, что это не заголовок, а больше того, что я сделал в CSS.

Почему я не могу прокрутить весь путь до конца? Каково решение?

Пример здесь: 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>

Повторите li 20 раз

  </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;
 }

Ответ 1

Поскольку у вас есть как заголовочные, так и левые элементы в контейнере, а левый элемент - 100% контейнера, это 100% плюс 60 пикселей вместе.

Вы можете освободить место для заголовка, используя box-sizing и padding-top в контейнере. Это сделает внутренний размер контейнера 100% минус 60 пикселей. Затем используйте отрицательное верхнее поле в заголовке, чтобы поместить его поверх этого дополнения:

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

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

Демо: http://jsfiddle.net/Guffa/D5KU3/11/

Вы также можете избавиться от поля страницы, в противном случае 100% контейнер и маржа будут выше окна:

body {
    margin: 0;
    padding: 0;
}

Ответ 2

я бы рекомендовал следующее

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

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

Ответ 3

На самом деле это довольно логично - у вас есть ваше тело и html, установленные на 100%. Это означает, что содержание тела не может быть выше свободного места в вашем браузере - и поэтому вы не видите дно.

Если вы удалите этот CSS, проблема будет решена; хотя было бы лучше установить тело на min-height: 100%. Таким образом, высота страницы всегда будет полным доступным пространством; если только контент больше.

Обновления jsfiddle: http://jsfiddle.net/D5KU3/3/

Ответ 4

Удалите overflow: hidden; из .container class

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

http://jsfiddle.net/atYpX/