我有一个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; }