Question

我有一个 DIV 菜单，设置为100％高度， 溢出：滚动 。在 DIV 中，我有 ul li 。我遇到的问题是它不会让我一直向下滚动以查看最后的 li 。我几乎看不到它。

我认为它与我的标题有关，因为当我删除标题时，我可以看到它。当我放回标题时，它会进入浏览器，无法一直向下滚动以查看最后的 li 。

li 和标题的高度几乎相同，并且标题导致问题很有意义。我认为不是标题，而是我在CSS中做的更多。

为什么我不能一直滚动到底部？解决方案是什么？

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

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

Answer 2

这实际上是相当逻辑的 - 你的身体和html设置为100％。这意味着正文的内容不能高于浏览器中的可用空间 - 因此您看不到底部。

如果删除此CSS，问题就解决了;虽然将身体设置为min-height: 100%可能更好。这样页面的高度始终是完整的可用空间;除非它的内容不止于此。

更新jsfiddle：http://jsfiddle.net/D5KU3/3/

Answer 3

我建议关注

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

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

Answer 4

从overflow: hidden;班级

中删除.container

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

http://jsfiddle.net/atYpX/

DIV设置为溢出：滚动，但不会一直滚动到底部

4 个答案: