上下定高 中间自适应_css经典布局——头尾固定高度中间高度自适应布局

今天说说一个经典布局：头尾固定高度中间高度自适应布局！

相信做过后台管理界面的同学，都非常清楚这个布局。最直观的方式是框架这个我不想多写费话，因为我们的重心不在这里。如果有不了解的同学可以百度、google。这里我不得不吐下槽！！

百度实在让我这个“粉丝”失望。就目前情况来说，百度已经完全轮为“有钱人排行榜”！再也不顾及用户的搜索需求了，因为主导地位实在是：不可撼动！

不相信的同学，可以亲身对比下B vs G的搜索结果。别告诉我google如何强大！！

很久以前，百度的搜索结果更符合目标，因为他更了解中国人的习惯，这是不可争议，现在情况已经完全相反！

虽然google经常是六脉神剑，但我更欣赏它的搜索结果。吐槽打住!!!

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

下面说下要求：

1 头部固定高度，宽度100%自适应父容器；

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

3 中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；

4 整个内容填满浏览器可视区域，并且不超出此区域！

先看下效果图：

相信，做过两年前端的同学，拿到这个需求，都有一个感觉——这挺简单的！

是的，本来就挺简单！

方法一：position:absolute定位，不设高，并改变"包含块"的尺寸渲染

从我脑海崩出来的第一个念头就是定位布局——position

而我也是这么做的，因为要固定头尾，所以，至少头和尾要用到position定位。因为浏览器大小是可以调节的，而且不同尺寸，不同分辨率的浏览器可视区域的高度是不固定的，

这就决定是中间主体部分的高度不固定。所以真正的问题核心也正在此。解决了这个问题，整个布局也就解决了一多半。

上代码，相信这也是符合大部分思路的实现方式：

头尾固定中间高度自适应布局

}#dBody{background:#FC0;width:100%;overflow:auto;top:100px;position:absolute;z-index:10;bottom:100px;

}.mycontent{padding:20px;

}#dFoot{height:100px;line-height:100px;background:#690;width:100%;position:absolute;z-index:200;bottom:0;text-align:center;

}

固定头部100px;