CSS布局:让页底内容永远固定在底部
我们在设计一些页面内容甚少的网页时(典型应用就是登陆页面),由于显示器的分辨率大,在正常情况下,假如页面内容高度小于浏览器高度时,页面底部以下会留下很大的空间...
先看示例:http://www.helloweba.com/demo/cssfooter/demo1.html
不管浏览器的高度怎么变化,我们要想让页底内容始终固定在底部,最终效果如:http://www.helloweba.com/demo/cssfooter/demo2.html
本文提供了一个CSS解决方案:
HTML
<div id="wrap">
<div id="main">
主体
</div>
</div> <div id="footer">
这里是页底footer内容
</div>
CSS
<style type="text/css">
* {margin:0;padding:0;}
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 60px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;
margin-top: -60px;
height: 60px;
clear:both;
background:#369} /*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
</style>
注意,以上代码在IE6上根本不起作用,必须使用以下代码来解决IE6下的BUG。
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
CSS布局:让页底内容永远固定在底部的更多相关文章
- CSS + DIV 让页脚始终保持在页面底部
来源:David's Blog http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...
- Css布局常用 1.盒子内容局中 2. 物理一像素 3.倒三角形 绘制
布局 对象属性 new Person('') 原型链 (创建对象.使用对象中的属性,如果没有那么就去原型找) new Person() Person{ name:'', getname( ...
- 转载 css截取td里面的内容 如何固定td th的宽度
源博客地址:http://blog.csdn.net/u011456552/article/details/53839255 效果图: 源码: <!DOCTYPE html> <ht ...
- 让页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- (转)一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- CSS布局设计
CSS布局设计: (1)固定布局:各个部分采用固定宽度的页面布局. (2)流式布局:通过定义模块和模块间距的百分比的方式来实现.缺点是会自动缩放,影响图片的美观. (3)响应式布局:页面可以用户的设备 ...
- 第九篇、CSS布局
<!--css布局 标准流:从上到下 从左到右 脱离标准流:(浮在父控件的最左边或者最右边)(类似ios在window上添加的控件) 1.float: 2.position: absolute( ...
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
随机推荐
- WPF窗口长时间无人操作鼠标自动隐藏
在软件开发中有时会有等待一段时间无人操作后隐藏鼠标,可能原因大致如下: 1.为了安全性,特别是那些需要用到用户名和密码登录服务端的程序,常常考虑长期无人操作,程序自动跳转到用户登录界面: 2.软件为了 ...
- CS小分队第一阶段冲刺站立会议(5月8日)
昨日成果:优化了扫雷游戏,解决了界面随格子数改变却不能缩小的bug,另外改写了程序,能使用户在点下第一个雷时再生成代码,防止第一步踩到地雷. 遇到的困难:主要就是考虑扫雷需不需要有一个存档,这个存档用 ...
- 拓展Jquery对象,实现Post提交并跳转
$.extend({ StandardPost:function(url,args){ var body = $(document.body), form = $("<form met ...
- 用Keytool和OpenSSL生成和签发数字证书
一)keytool生成私钥文件(.key)和签名请求文件(.csr),openssl签发数字证书 J2SDK在目录%JAVA_HOME%/bin提供了密钥库管理工具Keytool,用于管理密 ...
- android 开发对gif解码(适配android 4.2、4.3、4.4版本)
android 开发对gif解码(适配android 4.2.4.3.4.4版本) 使用方法: public class ImageInputActivity extends Activity imp ...
- 用setTimeout 代替 setInterval实时拉取数据
在开发中,我们常常碰到需要定时拉取网站数据,如: setInterval(function(){ $.ajax({ url: 'xx', success: function( response ){ ...
- python 解析web接口的json数据
实例1-使用urllib2 #utf-8 import urllib2 import json url="http://xxx.com" #获取json格式的字符串 page=ur ...
- Redis 起步
Rdis和JQuery一样是纯粹为应用而产生的,这里记录的是在CentOS 5.7上学习入门文章: 1.Redis简介 Redis是一个key-value存储系统.和Memcached类似,但是解决 ...
- 【BZOJ】【1042】【HAOI2008】硬币购物
DP+容斥原理 sigh……就差一点…… 四种硬币的数量限制就是四个条件,满足条件1的方案集合为A,满足条件2的方案集合为B……我们要求的就是同时满足四个条件的方案集合$A\bigcap B\bigc ...
- 【BZOJ】【1015】 【JSOI2008】星球大战starwar
并查集/时光倒流 删点维护连通块个数比较难处理,所以我们就逆序来做,先处理最后状态下有多少连通块,再依次加入被删的点,这样就变删点为加点,利用并查集即可维护连通块个数. /************** ...