在不适用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 ...
随机推荐
- ASP.NET经典权限解决方案,适用于OA、CRM、ERP、HR等应用系统
经典权限解决方案 1.权限简介 一般的管理系统都需要对用户的操作进行一定的限制,有的用户可以有许多操作,有的则有少量的操作.这样就需要一个授权机制,基于角色的授权机制描述了某个角色拥有一定数量的操作授 ...
- hdu 5818 Joint Stacks (优先队列)
Joint Stacks Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...
- Java线程的五种状态详解
状态转换图 1.new状态:通过new关键字创建了Thread或其子类的对象 2.Runnable状态:即就绪状态.可从三种状态到达,new状态的Thread对象调用start()方法,Running ...
- PHP exec()函数的介绍和使用DEMO
exec()函数用来执行一个外部程序,我们再用这函数基本是在linux. 开启exec()函数: exec()函数是被禁用的,要使用这个函数必须先开启.首先是 要关掉 安全模式 safe_mode = ...
- 简易安装ubuntu- -(虚拟机实现)
第一步:获取资源 安装vmware 百度上搜索vmware虚拟机,直接在百度上下载下来. 按平时安装东西步骤差不多 最后使用的时候有出现适用30天或者永久使用需要序列号 序列号可以使用 5A02H-A ...
- Volatility2.4以上版本及fmem使用指南
因为要做一个取证项目,需要用到volatility这款软件,网上很多教程已经是很多年以前的东西了,导致很多人在制作profile这一步就卡住了,今天解决了这个问题,记录在此,分享给大家共同学习 1.安 ...
- react 生命周期图
1. react v16 版本生命周期 2. react v17 (还未发布), 生命周期将被改动,下面红框的部分就是会被删除的部分,注意调整!
- C# 如何判断字符串中是否包含另一个字符串?
如 字符串1(str1)为:“你好怎么解决呢!” 字符串2(str2)为:“你好” 如果str1里面包str2 则 Response.Write("成功");否则 Resp ...
- 基于tensorflow的增强学习
可以通过下面的连接查看这个项目工程: https://github.com/reinforceio/tensorforce 通过这遍文章来了这个项目的使用: https://reinforce.io/ ...
- Java 进阶巩固:什么是注解以及运行时注解的使用
这篇文章 2016年12月13日星期二 就写完了,当时想着等写完另外一篇关于自定义注解的一起发.结果没想到这一等就是半年多 - -. 有时候的确是这样啊,总想着等条件更好了再干,等准备完全了再开始,结 ...