html页面设置滚动无效问题

来源：互联网发布：任子行网络审计编辑：程序博客网时间：2024/06/06 12:38

今天在做前端后台管理项目时发现页面内容过多，整个页面会随着滚动条一起滚动，导致网页很难看，于是决定固定整个页面的高度为显示屏的高度，然后让里面的某各div可设置滚动条。我以为就是设置html的overflow为hidden，div的overflow为auto就行了，但现实告诉我，我太天真。
首先我设置html的overflow为hidden，整个页面是不滚动了，可是该滚动的div即使内容超出屏幕高度，设置overflow为auto也不滚动，上网查了一下说是要设置div的高度可是我的这个div的高度得自适应不能设置具体的px高度，所以还是出不来，在网上找了好久终于发现了一种方法，下面就上代码啦
页面html结构如下

<html>  <head></head>  <body style="height:100%;overflow:hidden;">  <header style="width:100%;height:40px;background-color:#ccc">头部信息</header>    <div class="main-container"style="height:100%">      <div class="side-bar" style="width:190px;float: left;background-color:#cfe">侧边栏导航</div>      <div class="main-content" style="height:100%;margin-left:190px">        <div class="breadcrumbs"style="height:40px;background-color:#ffe">首页</div>        <div class="my-content" style="overflow:auto;"><p>我想这一关能过吧，一定能够过的，我想这一关能过吧，一定能够过的我想这一关能过吧，一定能够过的</p></div>      </div>   </div></body></html>

截图如下
这是左列定宽右列自适应结构，我想让首页下面的内容div,也就是div-content的内容超出高度出现滚动条，但是结果并没有，于是我进行了如下样式改动

.main-content{  position: relative;//将其父元素相对定位} .my-content{  position: absolute;  right: 0;  left: 0;  bottom: 0;  top:41px; //这里是因为breadcrumbs的高度为41px  margin-bottom: 41px;//必须有，负责滚动条拉到底内容显示不完全 }

最后的效果图如下
到这里，终于搞定了！

0 0