<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. spring使用jdbcTemplate和jdbcdaosupport和namedparameter
			
    jdbcTemplate: 首先连接数据库 <!-- 导入外部文件 --> <context:property-placeholder location="classpat ...
    
			
    2. 
						
  2. java调用wsdl xfire和cxf两种方式
			
    xfire 如下: String spID = ""; String password = ""; String accessCode = "&quo ...
    
			
    3. 
						
  3. 常见dos命令
			
    打开控制面板:win+r  control 服务: win+r  services.msc
    
			
    4. 
						
  4. Linux Kernel Vhost 架构
			
    Vhost 回顾 Linux中的vhost驱动程序提供了内核virtio设备仿真. 通常,QEMU用户空间进程模拟guest的I / O访问. Vhost将virtio仿真代码放到内核中,使QEMU用 ...
    
			
    5. 
						
  5. git clone出现SSL错误
			
    在学习git的时候,发现不能使用git clone从github.com下载,报了个ssl错误. Cloning into cancan... error: SSL certificate probl ...
    
			
    6. 
						
  6. Linux格式化字符串
			
    > 常用 > 详细 给定的格式FORMAT 控制着输出,解释序列如下: %% 一个文字的 % %a 当前locale 的星期名缩写(例如: 日,代表星期日) %A 当前locale 的星期 ...
    
			
    7. 
						
  7. springMVC+Java验证码完善注册功能
			
    这篇文章简单的写了一个java验证码,为之前写过的springMVC注册功能加上验证码,验证码的作用就不多说了,防止机器人程序恶意注册什么的.. 其中User.java,加上了password和cod ...
    
			
    8. 
						
  8. Gdevops2016年全球敏捷运维峰会【上海站】嘉宾阵容
			
    2016年全球敏捷运维峰会(Gdevops, Global Devops Summit)将于2016年在杭州.北京.广州.上海四城全面启动,本次峰会旨在搭建一个开发者与 运维者沟通交流的平台,围绕各种 ...
    
			
    9. 
						
  9. 《JS权威指南学习总结--6.8对象的三个属性》
			
    内容要点: 每一个对象都有与之相关的原型(prototype).类(class)和可扩展性 一.原型属性 1.对象的原型属性是用来继承属性的,这个属性是如此重要,以至于我们经常把 "0的原型 ...
    
			
    10. 
						
  10. Qml 定义 constant
			
    对于程序中一些常量如字符串, 实数等, C++中经常用的方法, 是定义全局常量: 或者把所有意义相近的常量用一个单例类收集起来. QML是类JSON的标识性语言, 使用js 语法去操作对象. 在QML ...
    
			
    11.