一、问题
- 如何实现上下两个div上面值固定下面铺满高度
- 下层div内容滚动
二、方案
- 通过flex布局实现
- 父级div设置 display: flex;flex-direction: column;
- 第一个子div 设置固定高度
- 第二个子div 设置flex: 1;
三、代码实现，可以直接拷贝浏览器查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>如何实现上下两个div上面值固定下面铺满高度</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.parent {
width: 100%;
height: 100%;
/* 此处 display: flex flex-direction: column 是关键*/
display: flex;
flex-direction: column;
}
.top {
background-color: #0086B3;
height: 100px;
}
.bottom {
/* 此处 flex 是重点*/
flex: 1;
overflow: auto;
background-color: #ff55ff;
}
.bottom .content {
height: 1000px;
}
</style>
</head>
<body>
<div class="parent">
<div class="top">
这里是第一块 固定高度
</div>
<div class="bottom">
<div class="content">我是内容</div>
</div>
</div>
</body>
</html>