flex两栏布局
2019-02-26 本文已影响3人
霡霂976447044
code
之前看到weex的官方文档的网页布局发现它的效果挺不错的，于是自己花了点时间把布局模仿了一下。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试flex两栏滚动条布局</title>
<style>
* {
margin: 0;
padding: 0;
}
*{
box-sizing: border-box;
}
header{
height: 100px;
width: 100%;
background-color: pink;
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
.main_content{
display: flex;
position: absolute;
top: 100px;
width: 100%;
left: 0;
bottom: 0;
right: 0;
overflow-y: hidden;
}
.content_wrapp{
display: flex;
width: 100%;
}
.l_box {
min-width: 250px;
overflow-y: auto;
background-color: aqua;
height: 800px;
}
.r_box {
overflow-y: auto;
flex: 1;
background-color: blue;
}
</style>
</head>
<body>
<header>header</header>
<div class="main_content">
<div class="content_wrapp">
<div class="l_box">left content
<h1 style="height: 400px">ss1</h1>
<h1 style="height: 400px">ss2</h1>
<h1 style="height: 400px">ss3</h1>
</div>
<div class="r_box">right content
<h1 style="height: 400px">ss1</h1>
<h1 style="height: 400px">ss2</h1>
<h1 style="height: 400px">ss3</h1> <h1 style="height: 400px">ss1</h1>
<h1 style="height: 400px">ss2</h1>
<h1 style="height: 400px">ss3</h1>
</div>
</div>
</div>
</body>
</html>
flex两栏布局.png
