简单实现顶部固定，中部自适应布局

最近在重构web导航的时候就发现一个问题，如何实现顶部固定，中部自适应的布局。

很多人会认为这很简单啊，顶部使用position: fixed;就可以实现。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>顶部固定，中部自适应</title><style type="text/css">* {margin: 0;padding: 0;}.hd {position: fixed;z-index: 99;top: 0;width: 100%;height: 20px;padding: 15px 0;text-align: center;color: #fff;background: #f00;}.bd {width: 100%;margin-top: 50px;padding: 15px 0;text-align: center;color: #fff;background: #00f;}</style>
</head><body><header class="hd">我是固定头部</header><div class="bd">我是中部部分<p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p></div>
</body></html>

这种做法确实简单，但是，请看清题目，顶部固定，中部自适应。（顶部不包括滚动条）

花了一点时间的思考，终于想出来了，中部使用position:absolute;就可以实现。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>顶部固定，中部自适应</title><style type="text/css">* {margin: 0;padding: 0;}.hd {width: 100%;height: 50px;padding: 15px 0;text-align: center;color: #fff;background: #f00;}.bd {position: absolute;top: 50px;/* 往下移顶部的距离 */bottom: 0;/* 底部贴边 */overflow: auto;/* 溢出的部分自适应 *//* 不设置高度 */width: 100%;padding: 15px 0;text-align: center;color: #fff;background: #00f;}</style>
</head><body><header class="hd">我是固定头部</header><div class="bd">我是中部部分<p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p></div>
</body></html>