使用flex布局实现局部滚动条

最新推荐文章于 2025-01-23 10:57:29 发布

不负当下

最新推荐文章于 2025-01-23 10:57:29 发布

阅读量5.0k

点赞数 3

分类专栏： css常用样式文章标签：前端 css

本文链接：https://blog.youkuaiyun.com/weixin_45272209/article/details/125777604

版权

css常用样式专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用Flex布局来实现页面中的局部滚动条。通过设置容器的高度、采用Flex的column方向，并对内容区域应用`flex: 1`和`overflow: auto`，可以实现内容超出时仅在该区域内显示滚动条。

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

使用flex布局实现局部滚动条

高度定高内容超出滚动条不设置为整页而是在局部

原理

最外层
- 定高
- 设置flex布局
- 方向为column
需要设置滚动条的内容
- 外层设置为 flex ：1
- 超出为设置滚动条(overflow: auto)
  - 必须设置子组件(超出的高度则会显示滚动条)

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
        padding: 0;
        margin: 0;
    }
    .box {
        height: 100vh; /* 高度占满屏幕 */
        display: flex;
        flex-direction: column;
        overflow: hidden; /*让其不能超出 box的高度 */
    }

    .top {
        height: 200px;
        background: red;
    }

    .content {
        flex: 1;  /* box中剩余空间分配给content */
        overflow: auto;  /* 如果子内容超出的话利用滚动条 */
    }
    .contentItem{

        background: antiquewhite;
        height: 2000px;

    }
</style>
<body>
<div class="box">
    <div class="top"></div>
    <div class="content">
        <div class="contentItem"></div>

    </div>
</div>
</body>
</html>