用flex布局局部滚动页面

前端纸飞机

于 2021-12-21 23:13:36 发布

阅读量2.4k

点赞数 3

分类专栏： flex 文章标签： css3 css 前端

纸飞机

本文链接：https://blog.csdn.net/qq_32442973/article/details/122051835

版权

flex 专栏收录该内容

1 篇文章

订阅专栏

我的姑娘，我好想你。

示意图

在这里插入图片描述
示意图如上图，贴合名片的那个页面了，用这个案例来演示下。

代码

<!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>Document</title>
</head>
<body>
    <div class="page">
        <div class="head">

        </div>
        <div class="container">
            <div class="left-scroll">
                <div class="text">我是内容，请给我设置文字吧</div>
            </div>
            <div class="right-scroll">
                <div class="text">我是内容，请给我设置文字吧</div>
            </div>
        </div>
    </div>
</body>
</html>

<style lang="scss">
*{
    margin: 0;
    padding: 0;
}
.page{
    height: 100vh;
    /* 页面高度100vh，100vh就是整个屏幕的高度 */
    display: flex;
    flex-direction: column;
    /* 设置为flex布局，并垂直 */
    overflow: hidden;
}
.head{
    height: 100px;
    width: 100%;
    background: #999;
}
.container{
    flex: 1;
    /* flex:1占据剩余空间 */
    display: flex;
    /* 设置为flex */
    overflow: hidden;
}
.container .left-scroll{
    width: 100px;
    height: 100%;
    background: red;
    overflow-y: auto;
}
.container .right-scroll{
    flex: 1;
    height: 100%;
    background: blue;
    overflow-y: auto;
}

.text{
    height: 3000px;
}
</style>