html – DIV设置为overflow：scroll,但不会一直滚动到底部

发布时间：2020-12-14 18:49:43 所属栏目：资源来源：网络整理

导读：我有一个DIV菜单设置为100％的高度与溢出：滚动.在DIV里面我有一个ul li.我的问题是,它不会让我滚动一下看到最后一个李.我几乎看不到它. 我认为它与我的标题有关,因为当我删除标题时,我可以看到它.当我放回标题时,它会放在浏览器下方,不能一直滚动到最后一个

我有一个DIV菜单设置为100％的高度与溢出：滚动.在DIV里面我有一个ul li.我的问题是,它不会让我滚动一下看到最后一个李.我几乎看不到它.

我认为它与我的标题有关,因为当我删除标题时,我可以看到它.当我放回标题时,它会放在浏览器下方,不能一直滚动到最后一个li.

li和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>

重复李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;
 }

解决方法

当您拥有容器中的标题和左边元素,而左边的元素是容器的100％时,这些元素是100％加上60个像素.

您可以通过在容器中使用盒子大小和填充顶部为标题腾出空间.这将使容器的内部尺寸减小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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!