0
点赞
收藏
分享

微信扫一扫

用flex布局局部滚动页面



我的姑娘,我好想你。


示意图

用flex布局局部滚动页面_前端

示意图如上图,贴合名片的那个页面了,用这个案例来演示下。

代码

<!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>

布局效果如下:

用flex布局局部滚动页面_前端_02

注意

除了滚动区域外,滚动区域的上级元素都要overflow:hidden,否则就会判定为上级元素会滚动。

原因见下方。

滚动形成的要素

用flex布局局部滚动页面_前端_03

当元素高度,达到以上条件,才会形成滚动区域。

即蓝色滚动区域高度固定,设置overflow:auto或者scroll,红色的是内容,要超过滚动区域的高度。



举报

相关推荐

0 条评论