html页面设置滚动无效问题

最新推荐文章于 2024-07-29 09:26:52 发布

fighting_today_cui

最新推荐文章于 2024-07-29 09:26:52 发布

阅读量3.3w

点赞数 5

分类专栏： web css html 文章标签：前端 html 页面滚动

本文链接：https://blog.csdn.net/qq_34109078/article/details/70880448

版权

web 同时被 3 个专栏收录

14 篇文章 1 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

今天在做前端后台管理项目时发现页面内容过多，整个页面会随着滚动条一起滚动，导致网页很难看，于是决定固定整个页面的高度为显示屏的高度，然后让里面的某各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;//必须有，负责滚动条拉到底内容显示不完全


 }