自游互动本篇文章记得一下css 布局上下固定高度 中间自适应高度 且内容 超出高度时出现滚轴
这里用的flex布局的方案实现布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>css flex 上下固定中间自适应例子</title>
<style>
body {padding: 0;margin: 0;}
#boxs {
width: 90%;
height: 300px;
border: 1px solid #333;
display: flex;
flex-direction: column
}
.dheight {
height: 50px;
min-height: 50px;
}
.center {
flex: 1;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="boxs">
<div class="dheight" style="background-color:#ffc5c5;">上边固定宽度</div>
<div class="center" style="background-color:#b9f;">
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
中间自适应高度超出有滚轴<br>
</div>
<div class="dheight" style="background-color:#7171f7;">下边固定宽度</div>
</div>
</body>
</html>