需求描述： 头部固定不动，内容部分区域滚动
一、实现代码
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>
