需求： 将footer固定到底部。文章内容不足满屏时 footer在底部，超过满屏时footer在内容末尾。

方法一：

<div id="wrap">

	<div id="main" class="clearfix">

		<div id="content">

		</div>

		<div id="side">

		</div>

	</div>

</div>

<div id="footer">

</div>

<style>
*{padding: 0;margin: 0;font-size:20px;}
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;margin-top: -150px; /* footer高度的负值 */height: 150px;clear:both;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>

方法二：fixed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sticky footer</title>
<style type="text/css">
*{padding: 0;margin: 0;font-size: 48px}
/* 第一步设置盒子为满屏大小 */
.box{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: auto;
background: green;
}
/* 第二步子盒子设置最小高度且清除浮动 给一个padding-bottom 等于footer 避免内容被footer遮盖*/
.box .main{
width: 100%;
min-height: 100%;

padding-bottom: 100px;
}
.box .main .content{
background: orange;
/*padding-bottom: 100px;*/
}
/* 第三步footer的高度和margin-top要相等 */
.box .footer{
position: relative;
width: 100%;
height: 100px;
background: #f3f3f3;
margin: -100px auto 0 auto;
clear: both;
text-align: center;
line-height: 100px;

}
.clearfix{
display: inline-block;

}
.clearfix::after{
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="main clearfix">
<div class="content">
<p>这里是内容区域</p>
<p>这里是内容区域</p>
<p>这里是内容区域</p>
<p>这里是内容区域</p>
<p>这里是内容区域</p>
<p>这里是内容区域</p>
<p>这里是内容区域</p>
</div>
</div>
<div class="footer">这是footer区域</div>
</div>
</body>
</html>

 

stick footer布局的更多相关文章

  1. css 中 stick footer 布局实现

    做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮.stick footer 就是让 footer 元素固定在底部 当内容不足满屏时,footer 紧 ...

  2. css经典布局—stick footer布局

    html部分 <div id="wrap"> <div id="main" class="clearfix"> &l ...

  3. 网页footer背景(stick footer布局)

    今天遇到了一个有意思的问题,想在网站的foot里面加入一张背景图片,并且在footer的底部写下一些内容于是乎在footer添加了background,并设置了footer的大小 先说一下开始的做法: ...

  4. 两种最常用的Sticky footer布局方式

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...

  5. 【CSS】Sticky Footer 布局

    什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...

  6. 【css技能提升】完美的 Sticky Footer 布局

    在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...

  7. css sticky footer 布局 手机端

    什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...

  8. 前端经典布局：Sticky footer 布局

    什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...

  9. 底部粘连(stiky footer)布局

    前面的话 在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内 ...

随机推荐

  1. iOS仿微博客户端一条微博的布局

    前言 做一个微博客户端的第三方是自学的第一个实践的项目,自从从事iOS工作之后,就把这个项目给搁置了.趁现在过年回来有些空闲时间,再次修改(总觉得项目就是不停地修改).并且记录一点东西,以后可再回头看 ...

  2. C#如何获取指定周的日期范围

    1. 不允许跨年 1) 第一周的第一天从每年的第一天开始,最后一周的最后一天为每年的最后一天. static void Main(string[] args) { DateTime first, la ...

  3. 【DOORS】如何基于DOORS实施需求管理

    引言 IBM Rational DOORS,简称DOORS,是被业界广泛认可的需求管理工具,在国内外需求管理领域具有较高的市场占有率.需求管理作为传统的工程领域,理论发展相对成熟和健全.随着越来越多的 ...

  4. css样式表1 2017-03-11

    样式表 DIV + CSS 一.        样式表的分类 以下均以div标签为例,可以换成其他标签 1.  内联样式表 格式: style="属性1:属性值1:属性2:属性值2:属性3: ...

  5. 安装SVN报无法访问windows installer服务。

    第一步:点击开始--运行,输入:cmd 第二步:输入regsvr32 msi.dll然后回车,会提示成功. 第三步:点击开始--运行,输入:services.msc按回车 第四部:调到页面后找到Win ...

  6. background-image 与 img 动画性能对比

    开发H5常常会用到滑屏,目前大部分滑屏插件都是通过控制页面的transform属性来实现.尽管如此,我总是发现自己的H5滑动起来就是不如网上一些优秀案例流畅,表现为滑动动画会出现卡顿.跳帧. 后来我发 ...

  7. HttpServletResponse对象介绍

    一.HttpServletResponse对象介绍

  8. Thread.join()的使用

    代码清单: package com.baidu.nuomi.concurrent; import java.util.concurrent.TimeUnit; /** * Created by son ...

  9. ###Intent的使用（活动中穿梭）

    让活动切换有两种方式 显示意图和隐式意图 显示意图:只能在本应用中穿梭: 隐式意图:可以调用其他应用程序的活动,包括系统应用,但是需要配置清单文件 显式Intent 1) 创建一个新的活动 2) 确定 ...

  10. java学习笔记 --- 多态

    一.多态 (1)定义:同一个对象在不同时刻体现出来的不同状态.父类的引用或者接口的引用指向了自己的子类对象.   Dog d = new Dog();//Dog对象的类型是Dog类型.  Animal ...