文档章节

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

furw
 furw
发布于 2015/11/24 10:08
字数 449
阅读 85
收藏 7
<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<title>头尾固定中间高度自适应布局</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0
}

#dHead {
height: 100px;
line-height: 100px;
background: #690;
width: 100%;
position: absolute;
z-index: 5;
top: 0;
text-align: center;
}

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

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

<body>
<div id="dHead">固定头部100px;</div>
<div id="dBody">
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br>
</div>
<div id="dFoot">固定尾部100px</div>
</body>

</html>


© 著作权归作者所有

共有 人打赏支持
furw
粉丝 18
博文 44
码字总数 14655
作品 0
海淀
前端工程师
私信 提问
网页瀑布流效果实现的几种方式

前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb it 起由 最近,在搭建个人博客时,其中的Demo展示页面想用瀑布流形式展现,发现现有...

撒网要见鱼
2016/11/13
0
0
css布局 - 常规上中下分左右布局的一百种实现方法

一、 上中下左固定 - fixed+margin 概括:如图,此种布局就是顶部、底部和左侧固定不动,只有中间右侧超出可滚动。 html: 1 1 2 关键点: 上下部分就是普通处理,fixed固定布局 position: ...

Eddie_yang
11/15
25
0
一个中年girl的技能遗忘清单——曾今理解的Flex是错误的

20181123技能遗忘清单 flex的用法 rem的计算方式 font发光,字体效果 写给未来的自己,也许几个礼拜,也许几年。 今天突然接到一个任务,做一个专题。那么我肯定用html+css+js写,但是由于我...

cherryvenus
11/23
0
0
【前端Talkking】 CSS系列——CSS深入理解之float浮动

float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有"刨根问底"...

micstone
05/15
0
0
iOS开发中行高灵活可变的UITableView的性能优化

iOS开发中行高灵活可变的UITableView的性能优化 一、UITableView的构建原理 在新闻类,电商类等应用中,应用着大量的图文混排视图,在表视图UITableView中,开发者通常需要在如下代理方法中计...

珲少
2016/08/27
1K
6

没有更多内容

加载失败,请刷新页面

加载更多

ActiveMQ消息传送机制以及ACK机制详解

AcitveMQ是作为一种消息存储和分发组件,涉及到client与broker端数据交互的方方面面,它不仅要担保消息的存储安全性,还要提供额外的手段来确保消息的分发是可靠的。 一. ActiveMQ消息传送机...

watermelon11
22分钟前
1
0
HashTable和Vector为什么逐渐被废弃

HashTable,不允许键值为null,还一个就是put方法使用sychronized方法进行线程同步,单线程无需同步,多线程可用concurren包的类型。 如编程思想里面说的作为工具类,封闭性做的不好没有一个...

noob_chr
昨天
0
0
Win10 下安装Win7双系统

很多人买了预装64位Win8/8.1的电脑后想重装(或者再安装一个)Win7系统,但是折腾半天发现以前的方法根本不奏效。这是因为预装Win8/8.1的电脑统一采用了UEFI+GPT引导模式,传统的BIOS(Legacy...

yaly
昨天
2
0

中国龙-扬科
昨天
2
0
假若明天来临——《AI.未来》读后感3900字

假若明天来临——《AI.未来》读后感3900字: 你有没有想过,如果有一天你被确诊为癌症患者,你会做些什么?你有没有想过,在你百年之后,你希望你的墓碑上刻写着什么内容? 在我翻开李开复老...

原创小博客
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部