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

Question

У меня есть меню DIV, который установлен на 100% высоты с переполнения: прокрутки. В пределах DIV У меня есть ul 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> 

Repeat литий 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; 
} 

Answer 1

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

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

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

Answer 2

Удалить overflow: hidden; из .container класса

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

http://jsfiddle.net/atYpX/

Answer 3

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

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

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

Answer 4

Поскольку у вас есть как заголовок, так и левый элементы в контейнере, а левый элемент - 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; 
}