<style type="text/css">

　　#wapper{

        position: relative;    /*重要！保证footer是相对于wapper位置绝对*/

        height: auto;

        min-height: 100%;

    }

　　#main-content{

        background:grey;

        padding-bottom: 60px;   /*重要！给footer预留的空间*/

    }

　　#footer{

　　　　background: green;

　　　　width: 100%;

　　　　position: absolute;

　　　　bottom:;              /* 关键 */

　　　　height:60px;             /* 此方法的缺点：页脚的高度需要手动调 */

　　}

</style>




<body style="margin:0">

    <div id="wapper">

        <!-- 主要内容 -->

        <div id="main-content">

            这里是内容

        </div>

        <!-- 页脚 -->

        <div id="footer">

            这里是页脚

        </div>

    </div>

 </body>






 


												


											
Footer固定在页面底部(CSS)的更多相关文章
	

    
								
  1. 让footer固定在页面底部（CSS-Sticky-Footer）
		
    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
    
		
    2. 
						
  2. footer固定在页面底部的实现方法总结
		
    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...
    
		
    3. 
						
  3. HTML中footer固定在页面底部的若干种方法
		
    <div class="header"><div class="main"></div></div> <d ...
    
		
    4. 
						
  4. 利用CSS使footer固定在页面底部
		
    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...
    
		
    5. 
						
  5. 在不适用fixed的前提下，当内容较少时footer固定在页面底部
		
    使用css,参考国外的一个解决方法: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS  ...
    
		
    6. 
						
  6. 让footer固定在页面（视口）底部（CSS-Sticky-Footer）
		
    让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
    
		
    7. 
						
  7. 页面元素固定在页面底部的纯css代码（兼容IE6）
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    8. 
						
  8. 【转载自W3CPLUS】如何将页脚固定在页面底部
		
    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...
    
		
    9. 
						
  9. 将HTML页面页脚固定在页面底部(多种方法实现)
		
    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ntp升级
			
    1. 系统与软件版本 1.1 系统版本 CentOS6.5 x86_64 1.2 ntpd软件版本 ntp-4.2.8p9.tar.gz 1.3 下载地址 官方下载地址:http://support. ...
    
			
    2. 
						
  2. 使用vs2010打开VS2013的工程文件
			
    在开发团队,会出现vs工具使用版本的不一样的情况.我的电脑使用的是VS2010,可是其他人员使用的是vs2013. 要打开其他人员上传的工程文件,可以通过三种方式: 1.下载一个vs2013版本. 2 ...
    
			
    3. 
						
  3. C#多线程：深入了解线程同步lock,Monitor,Mutex,同步事件和等待句柄（中）
			
    本篇继续介绍WaitHandler类及其子类 Mutex,ManualResetEvent,AutoResetEvent的用法..NET中线程同步的方式多的让人看了眼花缭乱,究竟该怎么去理解呢?其实, ...
    
			
    4. 
						
  4. 实战JAVA虚拟机 JVM故障诊断与性能优化 pdf
			
    需要的小伙伴拿走,百度云盘:http://pan.baidu.com/s/1nvm6RHZ
    
			
    5. 
						
  5. hbase伪分布
			
    1.编辑 conf/hbase-env.sh来告知HBase java的安装路径.在这个文件里你还可以设置HBase的运行环境,诸如 heapsize和其他 JVM有关的选项, 还有Log文件地址,等 ...
    
			
    6. 
						
  6. 设计模式 -- 解释器模式（Interpreter Pattern）
			
    2015年12月15日00:19:02 今天只看了理论和demo,明天再写文章,跑步好累 2015年12月15日21:36:00 解释器模式用来解释预先定义的文法. <大话设计模式>里面这 ...
    
			
    7. 
						
  7. CodeForces 705A Hulk
			
    水题. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #includ ...
    
			
    8. 
						
  8. javascript中关于继承的理解
			
    首先,你要理解在javascript中,每当一个新函数创建时,都会生成一个prototype属性,我们管它叫做原型对象.看一个例子: function foo(){ this.name='qiangq ...
    
			
    9. 
						
  9. Struts2权威指南笔记
			
    Struts2权威指南笔记 1.mvc特点包括: ① 多个视图可以对应一个模型 ② 模型返回的数据与显示逻辑分离 ③ 应用层被分隔为三层,降低了各层之间的耦合,提供了应用的可扩展性 ④ 控制层的概念也 ...
    
			
    10. 
						
  10. EconomicIndoor集成测试
			
    加密时序列号相同引发的呼叫功能异常 现象描述: 配置完房间号一次性呼叫问题 问题描述: 两台室内机升级后配置到同一门口机, 各种配置正确. 作为主叫呼不出去, 作为被叫可以接听, 每修改一次房间号,  ...
    
			
    11.