今天我们来谈谈经典的布局吧。 头尾固定高度中间高度自适应布局！

我相信做过后台管理界面的同学都很了解这个布局。 最直观的方法是框架。 我们的中心不在这里，所以我不想写多余的东西。 如果有不认识的同学，百度、谷歌就可以了。 在这里我必须吐槽！

百度真的让我的“粉丝”失望了。 从目前情况看，百度完全成为“清爽糖豆排行榜”！ 因为已经无视用户的搜索需求，主导地位真的“不可动摇”！

不信的人可以自己比较B vs G的搜索结果。 不要告诉我谷歌的强大！

过去，百度的搜索结果符合目标。 他更了解中国人的习惯，所以这没能讨论。 现在情况完全相反了

谷歌一直是六脉神剑，但我更享受它的搜索结果。 冲进去！

正式开始谈论这个经典布局——头尾固定高度中间高度自适应布局

1头部固定高度、宽度100%适应母容器；

2底部固定高度，100%宽适应母容器；

3中间是主体部分，自动填充，是浏览器可视区域的其余部分，超过内容后中间部分会出现流程图；

4整个内容填满浏览器的显示区域，不超出该区域！

请相信我。 做了两年前端的同学，得到了这个需求，觉得——很容易。

方法1 (定位位置： absolute，不设置高度，并调整“包括块”的大小进行渲染)

我脑海中浮现的第一个想法是位置布局——定位

我也在这么做。 因为必须固定头和尾，所以至少头和尾需要使用定位。 因为浏览器的大小是可调整的，且分辨率因大小而异的浏览器的可见区域高度并不恒定

这意味着中间主体部分的高度不一定。 所以真正问题的核心也在这里。 如果解决了这个问题，整个布局也解决了一半以上。

升级代码，我相信这也是符合大部分构想的实现方法：

固定头尾中央高度适应布局