在不适用fixed的前提下,当内容较少时footer固定在页面底部
使用css,参考国外的一个解决方法:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How to use the CSS Sticky Footer on your website
Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div> <div class="footer">
<p>Copyright (c) 2008</p>
</div> </body>
</html>
注意:
1. 注意footer body 的border/padding值会影响显示;
2. 当页面包含header时 .footer, .push 的设置会随之改变并不相等;
在不适用fixed的前提下,当内容较少时footer固定在页面底部的更多相关文章
- call 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.
call 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. 注意:该函数的语法与 apply() 方法的语法几乎完全相同,唯一的区别在于,apply()方法接受的是一个参 ...
- 如何使用python在保留原excel格式的前提下插入/修改数据
一.需求分析: 统计的报表中需要每日查询当天数据并追加到原有的excel后面. 因为原始excel格式已经设定好,如果使用xlwt,仅仅指定设定我们要插入的单元格的格式,原始数据的格式会被初始化. 所 ...
- a,b,c为3个整型变量,在不引入第四个变量的前提下写一个算法实现 a=b b=c c=a?(异或解决值互换问题)
package com.Summer_0424.cn; /** * @author Summer * a,b,c为3个整型变量,在不引入第四个变量的前提下写一个算法实现 a=b b=c c=a? */ ...
- a,b为2个整型变量,在不引入第三个变量的前提下写一个算法实现 a与b的值互换
package com.Summer_0424.cn; /** * @author Summer * a,b为2个整型变量,在不引入第三个变量的前提下写一个算法实现 a与b的值互换? */ publi ...
- 不修改模板的前提下修改VisualState中的某些值
原文链接:不修改模板的前提下修改VisualState中的某些值 - 超威蓝火 UWP里有一件非常令人不爽的事,大部分控件只提供了Normal状态下的Background,Foreground,Bor ...
- 【F12】谷歌浏览器--前台效果可以在不访问服务器的前提下直接改样式看效果是否是预期值。
F12-前台效果可以在不访问服务器的前提下直接改样式看效果是否是预期值. 1.Element---页面所有元素,通过它可以做selenium的元素定位,删除页面元素,增加页面属性(通过增加页面属性便于 ...
- Android DevArt4:IntentFilter学习及深入~问题描述:在不指定具体action前提下,如果有两个以上的Activity,具有完全相同的intent-filter,项目同步是否会出现异常?程序运行是否会崩溃?
概述:GitHub IntentFilter意图过滤器,三种匹配规则:action.category.data 重点:过滤规则中必须设置 '<category android:name=&quo ...
- ISE中的Force Process Up-to-Date功能:ISE中如何在未综合实现的前提下打开ChipScope ?
ISE中如何在未综合实现的前提下双击Analyze Design Using ChipScope打开ChipScope ? 有时,你正在ISE中调试程序,在ChipScope中看到了现象,顺手修改了程 ...
- bootstrap中container 类和container-fluid类的区别container类所谓的自适应也是通过margin的改变来完成,container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。
container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在. container类所谓的自适应也是通过margin的改变来完成,container-fl ...
随机推荐
- js的 style.width 取不到元素的宽度值
以前一直用jquery的.width()方法来获取一个元素的当前的宽度.不管该元素是否设置了宽度,CSS样式是内联.外联or内嵌,都可用此方式获得元素当前的宽度. 今天想用原生JS想获取一个元素宽度时 ...
- python中“生成器”、“迭代器”、“闭包”、“装饰器”的深入理解
一.生成器 1.什么是生成器? 在python中,一边循环一边计算的机制,称为生成器:generator. 2.生成器有什么优点? 1.节约内存.python在使用生成器时对延迟操作提供了支持.所谓延 ...
- 迁移到阿里云后,NTKO控件报存word 报文件存取错误,请检查网络传输。
解决办法:安装如下组件即可!
- MoreEffectiveC++Item35 条款27: 要求或禁止对象产生于heap中
一 要求对象产生在heap中 阻止对象产生产生在non-heap中最简单的方法是将其构造或析构函数声明在private下,用一个public的函数去调用起构造和析构函数 class UPNumber ...
- js 删除数组的指定元素
//为数组对象增加相应的的方法,直接调用数组的removeByValue方法即可删除指定元素 Array.prototype.removeByValue = function (val) { for ...
- (二) ffmpeg filter学习--混音实现
Audio 混音实现 从FFMPEG原生代码doc/examples/filtering_audio.c修改而来. ffmpeg版本信息 ffmpeg version N-82997-g557c0df ...
- 【译】从数学公式入手,详细了解 Animation 的 Interpolators
我们在做动画的时候,总是避免不了会使用到 Interpolator(插值器)这个东西,比如 LinearInterpolator 等.这样做的好处是,能够让动画的变化速度符合现实世界中的物理规律,看上 ...
- 测试实战经验之checklist篇20140905
我们测试中,在各个环节应该有自己的一个checklis来帮助我们梳理我们要做什么,该做什么,以下是我的一个小总结: 1.在测试前我们需要做的: 2.在拿到测试包后我们该做的 3.测试通过后我们该做的 ...
- IOS开发Block详细用法
Block简介: ios4.0系统已开始支持block,在编程过程中,blocks被Obj-C看成是对象,它封装了一段代码,这段代码可以在任何时候执行.Blocks可以作为函数参数或者函数 ...
- Django项目部署(阿里云)(2)--扩展
新博客地址:http://muker.net/django-server-two.html 前面的只是最简单的部署,真实情况总是更复杂一点实际流程大概是这么操作的(我这种菜鸟的想法):本地写代码-&g ...