Html DIV 设置为溢出：滚动，但不会一直滚动到底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20168936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DIV set to overflow:scroll, but wont scroll all the way to bottom
提问by user3025512
I have a DIVmenu that is set to 100% height with a overflow:scroll. Within the DIVI have a ul li. The problem I have is that it wont let me scroll all the way down to see the last li. I can barely see it.
我有一个设置为 100% 高度的DIV菜单，带有一个overflow:scroll。在DIV 中，我有一个ul li。我遇到的问题是它不会让我一直向下滚动以查看最后一个li。我几乎看不到它。
I think it has something to do with my headerbecause when I remove the header, I can see it. When I put back the header, it goes under the browser and cannot be scrolled all the way down to see the last li.
我认为这与我的标题有关，因为当我删除标题时，我可以看到它。当我放回标题时，它进入浏览器下方，无法一直向下滚动以查看最后一个li。
Both liand header are almost identical in height and it makes a lot of sense that the header is causing the problem. Not the header in particular, I think, but more of something I did in CSS.
无论李和头的高度几乎相同，这让很多的意义上说，头引起的问题。我认为不是特别是标题，而是我在 CSS 中所做的更多事情。
Why cant I scroll all the way to the bottom? What is the solution?
为什么我不能一直滚动到底部？解决办法是什么？
Sample here: http://jsfiddle.net/D5KU3/2/
此处示例：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 li20 times
重复li20次
</ul> <!--ul ends here-->
</div> <!--container ends here-->
CSS
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;
}
回答by Guffa
As you have both the class="header"and class="left"elements in the container, and the class="left"element is 100% of the container, those are 100% plus 60 pixels together.
由于容器中有class="header"和class="left"元素，并且class="left"元素是容器的 100%，因此它们是 100% 加上 60 个像素。
You can make room for the header by using box-sizingand padding-topin the container. That will make the inner size of the container 100% minus 60 pixels. Then use a negative top margin on the header to place it on top of that padding:
您可以通过在容器中使用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;
}
Demo: http://jsfiddle.net/Guffa/D5KU3/11/
演示：http: //jsfiddle.net/Guffa/D5KU3/11/
You might also want to get rid of the page margin, otherwise the 100% container and the margin is taller than the window:
您可能还想去掉页边距，否则 100% 容器和边距比窗口高：
body {
margin: 0;
padding: 0;
}
回答by ProllyGeek
i would recommend following
我会推荐以下
.left {
position:absolute;
width:260px;
top:60px;
height:100%;
background:#fff;
overflow:scroll;
}
回答by Gerben Van Dijk
It's actually quite logic - you have your body and html set to 100%. This means the content of the body can't be higher then the available space in your browser - and so you don't see the bottom.
这实际上很合乎逻辑 - 您将 body 和 html 设置为 100%。这意味着正文的内容不能高于浏览器中的可用空间 - 因此您看不到底部。
If you remove this CSS the problem is solved; although it might be better to set the body to min-height: 100%. This way the height of the page will always be the complete available space; unless it's content is more than that.
如果你删除这个 CSS，问题就解决了；虽然将 body 设置为min-height: 100%. 这样页面的高度将始终是完整的可用空间；除非它的内容不止于此。
An updates jsfiddle: http://jsfiddle.net/D5KU3/3/
更新 jsfiddle：http: //jsfiddle.net/D5KU3/3/
回答by Joel Fernandes
Remove the overflow: hidden;from .containerclass
overflow: hidden;从.container类中删除
.container {
width:260px;
height:100%;
background:silver;
margin:0 auto;
font-family:sintony;
}
