DIV設置爲溢出：滾動，但所有的方法不會滾動到底

Question

我有設定爲100％的高度與溢出DIV菜單：滾動。在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> 

重複李 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本身t到100％。這意味着身體的內容不能高於瀏覽器的可用空間 - 所以你看不到底部。

如果你刪除這個CSS，問題就解決了;儘管將身體設置爲min-height: 100%可能更好。這樣頁面的高度將始終是完整的可用空間;除非它的內容不止於此。

一個更新的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; 
}