需求： 将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 footers布局的更多相关文章

  1. Stick footers布局总结

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

  2. stlcky footers布局小技巧

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

  3. css经典布局—Sticky footers布局

    参考:http://www.w3cplus.com/CSS3/css-secrets/sticky-footers.html 效果:将footer固定到底部.文章内容不足满屏时 footer在底部,超 ...

  4. css 中 stick footer 布局实现

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

  5. stick footer布局

    需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...

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

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

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

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

  8. IE 11 flex布局兼容性问题 ---- 不支持min-height 和flex:1

    由于最近项目要嵌入其它平台,所以要做IE11 的兼容,那就用IE11打开网页看一看,一看吓一跳,页脚直接到了页眉的下面,并把主要内容覆盖了,也就是stick footer 布局失效了,我写了一个简易的 ...

  9. 项目vue2.0仿外卖APP（五）

    header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...

随机推荐

  1. struts-2-spring-2-jpa-ajax

    http://struts.apache.org/docs/struts-2-spring-2-jpa-ajax.html

  2. tcpreplay 发包速率控制算法研究

    一.  序 1.1  tcpreplay历史 Tcpreplay 的作者是Aaron Turner,该项目开始于2000年,早期的功能是对tcpdump等抓包工具生成的网络包(即pcap文件)的回放, ...

  3. HttpApplication理解

    HttpApplication对象是经由HttpApplicationFactory.GetApplicationInstance(并最终调用HttpRuntime.CreateNonPublicIn ...

  4. nginx+ssl+Portus+registry docker仓库

    还存在的问题,如果通过nginx 转发推过去的镜像,在web页面显示比较慢,需要等定时任务发现了才能及时显示出来,如果通过b.p.xxx.cn:5000加端口push 的镜像就比较快显示出来.只影响到 ...

  5. python函数getopt用法

    python内建模块,用来处理命令行参数 格式:getopt(args, shortopts, longopts = []) 参数args一般是sys.argv[1:]sys.argv[0]表示执行文 ...

  6. 利用问答机器人API开发制作聊天类App

    缘起 很久没写项目了,所以单纯的想练练手,正好看到有问答机器人的接口,想到之前也做过聊天项目,为什么不实验一下呢.当然也是简单调用接口的项目,并没有真正的完成问答的算法等等.业余项目,功能不齐全,只实 ...

  7. Django——如何处理请求（URL配置和视图）

    URLconfig—— 为了绑定视图函数和URL,我们使用URLconf. URLconf 就像是 Django 所支撑网站的目录. 它的本质是 URL 模式以及要为该 URL 模式调用的视图函数之间 ...

  8. 图解avaScript中this指向(超透彻)

    一个图讲清楚JavaScript中this指向: 说明: (1)严格模式下,禁止this关键字指向全局对象会报错. (2)闭包中的this对象具有全局性,因此通常指向window.  (3)优先级:n ...

  9. 【Java】Java_14 循环结构

    循环结构 当型:当P条件成立时(T),反复执行A,直到P为“假”时才停止循环. 直到型:先执行A, 再判断P,若为T,再执行A,如此反复,直到P为F. 1.While循环 while循环的基本格式和流 ...

  10. 【DB2】SQL0501N FETCH 语句或 CLOSE 语句中指定的游标尚未打开，或者游标标量函数引用中的游标变量尚未打开。 SQLSTATE=24501

    在DB2中建立存储过程时使用了隐式游标,在调用的时候报错如下: SQL0501N  FETCH 语句或 CLOSE 语句中指定的游标尚未打开,或者游标标量函数引用中的游标变量尚未打开.  SQLSTA ...