文档章节

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

furw
 furw
发布于 2015/11/24 10:08
字数 449
阅读 81
收藏 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
粉丝 19
博文 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
【前端Talkking】 CSS系列——CSS深入理解之float浮动

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

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

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

珲少
2016/08/27
1K
6
从css盒子与定位到布局

css盒子模型 原理:padding,border,margin三者构成一个盒子。 图片来自网络 Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内...

黑天很黑
2017/01/26
0
0
以淘宝新版首页为实例讲述网页布局

一、以淘宝新版首页为实例讲述网页布局 1.1 流动性(自适应)布局 自适应布局,是指页面主体部分的宽度随着浏览器宽度的大小而发生改变 优点: 1. 显示器宽度利用率高,固定宽度的布局上,宽屏...

the3musketeers的博客
2017/12/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊redisson的DelayedQueue

序 本文主要研究一下redisson的DelayedQueue maven <dependency><groupId>org.redisson</groupId><artifactId>redisson</artifactId><version>3.8.1</version></dependenc......

go4it
26分钟前
1
0
一张图看懂JVM

JVM结构示意图 JVM总体概述 JVM总体上是由类装载子系统(ClassLoader)、运行时数据区、执行引擎、内存回收这四个部分组成。其中我们最为关注的运行时数据区,也就是JVM的内存部分则是由方法...

小致dad
28分钟前
0
0
安全管理标准

安全生产严重等级分类: 故障频次: 风险等级矩阵:

乔老哥
59分钟前
2
0
数据结构“树”的相关微视频

今天在腾讯视频上闲逛,然後发现一个叫“岚人”的用户上传了几段小视频,基本上都在5分钟以内,讲解了关于树的一些结构和算法。零代码,非常适合初学者入门。不过,对于老鸟来说,这也是非常...

Iridium
今天
1
0
10-利用思维导图梳理JavaSE-Java 集合

10-利用思维导图梳理JavaSE-Java 集合 主要内容 1.Collection接口 2.Set接口 2.1.Set接口概述 2.2.HashSet类 2.3.TreeSet类 2.4.SortedSet接口 3.List接口 3.1.List接口概述 3.2.ArrayList类...

飞鱼说编程
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部