html页面设置滚动无效问题

最新推荐文章于 2025-07-11 16:48:09 发布

fighting_today_cui

最新推荐文章于 2025-07-11 16:48:09 发布

阅读量3.3w

点赞数 5

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_34109078/article/details/70880448

web 同时被 3 个专栏收录

14 篇文章

订阅专栏

css

9 篇文章

订阅专栏

html

5 篇文章

订阅专栏

本文介绍了一种在前端开发中解决特定布局下滚动条显示问题的方法。通过调整HTML和CSS属性，实现页面主体部分固定高度并使指定区域内容超出时出现滚动条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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


 }