当前位置：网站首页>使用flex布局实现局部滚动条

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

2022-07-17 23:15:00 【不负当下】

使用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>