三栏布局——上下宽高固定，中间自适应
Posted sallyshan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三栏布局——上下宽高固定，中间自适应相关的知识，希望对你有一定的参考价值。
上下宽高固定，中间自适应的几种布局方式，
有4种布局方式： position; flex; table; grid。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上下固定，中间自适应</title>
</head>
<style type="text/css">
html *
padding: 0;
margin: 0;
html,
body
height: 100%;
.layout
width: 200px;
margin-right: 20px;
display: inline-block;
overflow: hidden;
height: 100%;
.layout .container div
width: 200px;
</style>
<body>
<!-- 定位 -->
<section class="layout position">
<style type="text/css">
.layout.position .container>div
position: absolute;
.layout.position .top
top: 0;
height: 100px;
background-color: pink;
.layout.position .middle
top: 100px;
bottom: 100px;
background-color: skyblue;
.layout.position .bottom
height: 100px;
bottom: 0px;
background-color: deeppink;
</style>
<article class="container">
<div class="top">pistion上</div>
<div class="middle">pistion中</div>
<div class="bottom">pistion下</div>
</article>
</section>
<!-- flex 注意 html和body的高度都要设置成100%-->
<section class="layout flexbox">
<style type="text/css">
.layout.flexbox
height: 100%;
.layout.flexbox .container
width: 200px;
display: flex;
height: 100%;
flex-direction: column;
.layout.flexbox .top
height: 100px;
background-color: pink;
.layout.flexbox .middle
flex: 1;
background-color: #87CEEB;
overflow: auto;
.layout.flexbox .bottom
height: 100px;
background-color: hotpink;
</style>
<article class="container">
<div class="top">flexbox上</div>
<div class="middle">flexbox中</div>
<div class="bottom">flexbox下</div>
</article>
</section>
<!-- 表格布局 -->
<section class="layout table">
<style type="text/css">
.layout.table
height: 100%;
.layout.table .container
height: 100%;
display: table;
width: 200px;
.layout.table .container>div
display: table-row;
.layout.table .top
height: 100px;
background-color: pink;
.layout.table .middle
background-color: #87CEEB;
.layout.table .bottom
height: 100px;
background-color: hotpink;
</style>
<article class="container">
<div class="top">table上</div>
<div class="middle">table中</div>
<div class="bottom">table下</div>
</article>
</section>
<!-- 网格布局 -->
<section class="layout grid">
<style type="text/css">
.layout.grid
height: 100%;
.layout.grid .container
height: 100%;
display: grid;
width: 200px;
grid-template-columns:100px;
grid-template-rows:100px auto 100px;
.layout.grid .top
background-color: pink;
.layout.grid .middle
background-color: #87CEEB;
.layout.grid .bottom
background-color: hotpink;
</style>
<article class="container">
<div class="top">grid上</div>
<div class="middle">grid中</div>
<div class="bottom">grid下</div>
</article>
</section>
</body>
</html>
以上是关于三栏布局——上下宽高固定，中间自适应的主要内容，如果未能解决你的问题，请参考以下文章