文档章节

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

furw
 furw
发布于 2015/11/24 10:08
字数 449
阅读 74
收藏 6
点赞 0
评论 0
<!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
以淘宝新版首页为实例讲述网页布局

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

the3musketeers的博客
2017/12/16
0
0
从css盒子与定位到布局

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

黑天很黑
2017/01/26
0
0
CSS 布局模块

在众多浏览器刚刚支持 CSS 的时候,我就已经开始使用它了,并且应该算是最早采用 CSS 进行页面布局的开发者之一了。那时候,浏览器之间的兼容性虽然不好,但我仍然热衷于尝试层出不穷的新特性...

楠木楠
2016/12/06
84
0
border属性的多方位应用和实现自适应三角形

属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标...

深海鱼在掘金
2017/11/23
0
0
【CSS】margin负值 – 一个秘密武器

CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道margin负值的秘密武器吗?我们一起看看吧! 1、带竖线分隔的横向列表(例如:网站底部栏目) 传统的分隔符是使用 ...

呢喃的猫咪
2013/03/20
0
1
典型的三行二列居中高度自适应布局

典型的三行二列居中高度自适应布局 如何使整个页面内容居中,如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题。下面就给出一个实际的例子,并详细解释。(本文的经验和是蓝色理想论...

恐空控
2013/06/13
0
0
CSS布局说——可能是最全的

前言 现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html。 其实,我们可能经常在聊组件化...

zimo
2017/09/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Git 基础 - 远程仓库的使用

远程仓库的使用 要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库。远程仓库是指托管在网络上的项目仓库,可能会有好多个,其中有些你只能读,另外有些可以写。同他人协作开发某...

谢思华
11分钟前
0
0
面试宝典-悲观锁和乐观锁

悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁。 乐观锁(Optimistic...

suyain
12分钟前
0
0
崛起于Springboot2.X之集成MongoDb使用mongoTemplate CRUD(27)

1、pom依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.7</version></dependency><dependency> <groupId>log4j</......

木九天
22分钟前
0
0
切分log日志

新建logback.xml放到resource里面 <?xml version="1.0" encoding="utf-8"?><configuration> <appender name="consoleLog" class="ch.qos.logback.core.ConsoleAppender"> <......

talen
28分钟前
0
0
spring @Resource 和 @Autowired 的使用区别

这两个 注解 @Resource 和 @Autowired , 常识都知道 @Resource 是 JAVAEE 自带的,@Autowired 是 spring 的自定义注解。 一般情况下, 使用 bean的时候, 这两个注解 随便使用一个即可。 但...

之渊
33分钟前
0
0
springboot集成elasticsearch客户端问题记录

1背景说明 服务端ES版本为5.5.2,springboot版本为1.5.6。 工程中添加如下依赖 2问题记录 2.1 NetworkPlugin类找不到 报错java.lang.ClassNotFoundException: org.elasticsearch.plugins.Net...

zjg23
35分钟前
1
0
快速构建ceph可视化监控系统

前言 ceph的可视化方案很多,本篇介绍的是比较简单的一种方式,并且对包都进行了二次封装,所以能够在极短的时间内构建出一个可视化的监控系统 本系统组件如下: ceph-jewel版本 ceph_expor...

万建宁
35分钟前
0
0
Java构造器使用注意

public class 父类A {int age = 10;protected void say() {System.out.println("父类A");}public 父类A() {override();}public void override() {Syst...

咸鱼AI
35分钟前
0
0
TensorFlow 线性分类

构造直线 z = 2 * x - 3 * y + 4 x0*w0+x1*w1+b=0 x1=-x0* w0/w1-b/w1 斜率 k= -w0/w1 截距 -b/w1 随机生成数据,加入一定的偏差,用直线将二维平面分为两部分 使用线性模型拟合参数 损失函数...

阿豪boy
38分钟前
0
0
翻译冒泡排序测试

翻译一个冒泡排序: var a = [1,3,2,4,6,5];var f = 0;var n = a.length ;for( var i =1; i<= n; i++) { for( var j = n-1 ; j >= i; j --) { if(a[j] < a[j+1]) { ......

钟元OSS
40分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部