上下定高中间自适应_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;

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

css经典布局——头尾固定高度中间高度自适应布局
今天说说一个经典布局:头尾固定高度中间高度自适应布局! 转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局. ...
上下定高中间自适应_上下固定中间自适应布局
1. 使用绝对定位对这三栏都实现绝对定位,其中中间绝对定位的位置是上下两栏的高度,内容超出则中间部分出现流动条: 代码实现: 绝对定位实现 html,body,div{ padding:0; mar ...
上下定高中间自适应_移动端布局上下固定中间自适应
第五步:完整代码百度经验 *{ margin: 0; padding: 0; } html,body{height:100%;} body{ font-family: 微软雅黑; backgroun ...
上下定高中间自适应_ADAS|驾驶辅助系统之自适应灯光照明系统
车灯是汽车的关键部位之一.汽车灯光的影响已经成为与道路安全驾驶密切相关的原因之一.AFS是近年来发展起来的一种新型智能照明系统,它使照明的有效覆盖范围更广,增加了汽车的安全性.随着道路和天气条件的变化 ...
上下定高中间自适应_联合首发|医药供应链平台一块医药获新一轮融资，赋能产业上下游提质增效...
创业邦获悉,近日,致力于医药供应链领域的「一块医药」刚刚完成新一轮融资,本轮融资由红杉中国种子基金领投,老股东心元资本.德迅投资.梅花天使创投跟投.联合创始人&CFO何雨表示,本轮融资将主要用 ...
div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=1362 一.关于t ...
三种有效解决DIV高度自适应的方法
本文和大家重点讨论一下DIV高度自适应的三种有效解决方法,它们分别是一是JS法.二是背景图填充法.三是"补丁大法"(比较变态). DIV高度自适应的三种有效解决方法 DIV+CSS ...
两栏布局之右定宽左自适应，上定高下自适应，下定高上自适应
这三种布局其实都是大同小异,今天就全部总结成一篇文章. 1.右定宽左自适应 <!DOCTYPE html> <html lang="en"> <hea ...
CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例
原文网址:CSS之布局系列--上中下布局(上下固定,中间自适应)--方法/实例_IT利刃出鞘的博客-CSDN博客简介本文用示例介绍CSS三行布局的方案. 三行布局,即:上.中.下.有两种方案:1. ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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