直播带货源码，用flex布局局部滚动页面

直播带货源码，用flex布局局部滚动页面

 

<!DOCTYPE html>
<html>
<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>
        <div>
        </div>
        <div>
            <div>
                <div>我是内容，请给我设置文字吧</div>
            </div>
            <div>
                <div>我是内容，请给我设置文字吧</div>
            </div>
        </div>
    </div>
</body>
</html>
<style>
*{
    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>

​

以上就是 直播带货源码，用flex布局局部滚动页面，更多内容欢迎关注之后的文章

 

posted @ 2022-09-01 14:05  云豹科技-苏凌霄  阅读(29)  评论(0)    收藏  举报