flex 布局实现局部区域滚动

古城微笑少年丶 2024-04-22 15:21 69阅读 0赞

> 需求描述： 头部固定不动，内容部分区域滚动

## ![55055e287dea4594814e7e9c57cf1e71.png][] ##

## 一、实现代码 ##

### 1、实现逻辑 ###

> 1. 最外层父元素，必须要flex布局，并且宽度、高度撑满可视化区域
> 
> =>代码为 width: 100vw;height: 100vh;  
> 
> 
> 2. 只给滚动区域设置 flex:1; overflow: scroll;
> 
> 解释：flex:1;意思是占满剩余空间; overflow: scroll; 当内容装不下时，允许出现滚动条

2、代码

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>区域滚动</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box-wrap {
                display: flex;
                flex-direction: column;
                height: 100vh;
            }
            .top-wrap {
                flex: 0 0 wrap;
            }
            .bottom-wrap {
                flex: 1;
                overflow-y: auto;
            }
    
            .my-content{
                height: 200px;
                border: 1px solid red;
            }
        </style>
    </head>
    
    <body>
        <div class="box-wrap">
            <div class="top-wrap">
                <h1>哈哈哈哈</h1>
                <p>嘘嘘嘘嘘</p>
            </div>
            <div class="bottom-wrap">
                <li class="my-content">整点内容</li>
                <li class="my-content">整点内容</li>
                <li class="my-content">整点内容</li>
                <li class="my-content">整点内容</li>
                <li class="my-content">整点内容</li>
                <li class="my-content">整点内容</li>
                <li class="my-content">整点内容</li>
            </div>
        </div>
    </body>
    
    </html>

[55055e287dea4594814e7e9c57cf1e71.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/bf3c41924c1a42579102be8e363fa726.png