<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. Android服务
			
    开启服务 (startservice) 服务一旦开启与调用者没有任何的关系 , 调用着的activity 即便是退出了 也不会影响 后台的service的运行. 在activity里面 不能去调用服务 ...
    
			
    2. 
						
  2. 从P1到P7——我在淘宝这7年（转）
			
    作者: 赵超  发布时间: 2012-02-25 14:47  阅读: 114607 次  推荐: 153   [收藏] (一) 2011-12-08 [原文链接] 今天有同事恭喜我,我才知道自己在淘 ...
    
			
    3. 
						
  3. 获取listview当前滚动的高度
			
    public int getScrollY() {      View c = mListView.getChildAt(0);      if (c == null ) {          ret ...
    
			
    4. 
						
  4. sql优化方式-转载
			
    我始终认为,一个系统的性能的提高,不单单是试运行或者维护阶段的性能调优的任务,也不单单是开发阶段的事情,而是在整个软件生命周期都需要注意,进行有效工作才能达到的.所以我希望按照软件生命周期的不同阶段来 ...
    
			
    5. 
						
  5. 2.1 IDEA
			
    1.背景:IntelliJ IDEA 比 Eclipse 更好http://www.oschina.net/news/26929/why-intellij-is-better-than-eclipse ...
    
			
    6. 
						
  6. SVN解锁失败的解决办法
			
    背景:在版本发布后,本人把工程文件上锁后,进行过修改但没有进行上传.后面一段时间后,开发人员需要进行修改提交,发现解锁不成功. 使用解锁命令时:提示如下: If you want to break t ...
    
			
    7. 
						
  7. Spring.net  学习
			
    最近一段时间,在学习spring.net方面的知识,spring.net是什么,spring.net是用来干什么的,我们这里就不在介绍了,spring.net有两方面的内容---IOC(DI)与AOP ...
    
			
    8. 
						
  8. pythonRedis 订阅功能实现
			
    两天机器做,host要写订阅主机的ip,客户端发消息,服务端订阅消息 cat redis_connector.py #!/usr/bin/env python__author__ = 'Q.Li'im ...
    
			
    9. 
						
  9. JavaScript中prompt()函数的用法。
			
    定义和用法 prompt()方法用于显示一个带有提示信息,并且用户可以输入的对话框. 语法 prompt(text,defaultText); 参数 描述 text 可选.要在对话框中显示的提示信息( ...
    
			
    10. 
						
  10. unity3d 学习过程记录
			
    通过泰克在线,开始学习视频教程 1.学习 Unity3d零基础教学初级篇:熟悉一下unity编辑器结构和控件以及对控件的基本操作 2.学习Roll-a-ball小项目开发:通过练习制作小游戏,巩固所学 ...
    
			
    11.