我有一个 DIV 菜单,该菜单设置为 100% 高度并带有 overflow:scroll。在 DIV 中,我有一个 ul li。我遇到的问题是它不会让我一直向下滚动以查看最后一个 li。我几乎看不到它。
我认为这与我的标题有关,因为当我删除标题时,我可以看到它。当我放回标题时,它位于浏览器下方,无法一直向下滚动以查看最后一个 li。
li 和 header 的高度几乎相同, header 导致问题很有意义。我认为,不是特别是标题,而是我在 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;
}
最佳答案
由于您在容器中同时拥有 class="header"
和 class="left"
元素,并且 class="left"
元素是容器的 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;
}
关于html - DIV 设置为溢出 :scroll, 但不会一直滚动到底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20168936/