flexbox 解决方案
html 部分
<article class="top-center-bottom">
<div class="top"></div>
<div class="center">
<h2> felxbox 解决方案</h2>
<p>中间拉伸，顶部和底部固定</p>
<p>中间拉伸，顶部和底部固定</p>
</div>
<div class="bottom"></div>
</article>
css
html * {
padding: 0;
margin: 0;
}
html,
body,
.top-center-bottom {
height: 100%;
}
.top-center-bottom {
display: flex;
flex-direction: column;
}
.top-center-bottom .top {
height: 100px;
background-color: red;
}
.top-center-bottom .center {
flex: 1;
background-color: yellow;
}
.top-center-bottom .bottom {
height: 100px;
background-color: olivedrab;
}
常见错误解析
1.在整个外面包了一层 div，如：
<div>
<article class="top-center-bottom">
<div class="top"></div>
<div class="center">
<h2> felxbox 解决方案</h2>
<p>中间拉伸，顶部和底部固定</p>
<p>中间拉伸，顶部和底部固定</p>
</div>
<div class="bottom"></div>
</article>
</div>
原因解析：
在外层的div 是没有宽度高度的，需要靠的是子元素撑开,里面的 <article> 是的高度是 css 中设置的top 和 bottom两个 100px 和 center 的高度。而center 的高度是根据内容撑开的。
