<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. mvc log4net将日志写入数据库失败解决之道——开启内部调试
			
    项目信息:spring mvc5  EF6 数据库:sql2008r2 log4net版本:1.2.10.0 第一天: 1.思路一:配了半天,一直无法写入数据库,网上搜了一大堆的资料,都没能解决,怀疑 ...
    
			
    2. 
						
  2. java中float和double的区别
			
    float表示单精度浮点数在机内占4个字节,用32位二进制描述. double表示双精度浮点数在机内占8个字节,用64位二进制描述.浮点数在机内用指数型式表示,分解为:数符,尾数,指数符,指数四部分. ...
    
			
    3. 
						
  3. ES CPU和磁盘IO升高
			
    问题 ES监控出现偶尔的波动,CPU和磁盘IO升高 有时候在凌晨,业务请求比较低,也没有慢查询,GC也比较正常,没有出现Full GC ES内部的merge segment会占用CPU和磁盘资源,怀疑 ...
    
			
    4. 
						
  4. Managed Switch: Confs
			
    shortcuts: c-w: delete word before c-a: move to first char c-y: delete everything after cursor c-z:  ...
    
			
    5. 
						
  5. Android:View颤抖的动画效果代码
			
    public void propertyValuesHolderDown(final View view) { PropertyValuesHolder pvhX = PropertyValuesHo ...
    
			
    6. 
						
  6. Python朝花夕拾
			
    Q1:HTTP Error 403: Forbidden python中经常使用urllib2.urlopen函数提取网页源码,但是有些时候这个函数返回的却是:HTTP Error 403: Forb ...
    
			
    7. 
						
  7. White space is required before the encoding pseudo attribute in the XML declaration.
			
    错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version=&quo ...
    
			
    8. 
						
  8. Java中三种常见的注释(注解) Annotation
			
    Java为我们提供了三种Annotation方便我们开发. 1 Override-函数覆写注解 如果我们想覆写Object的toString()方法,请看下面的代码: class Annotation ...
    
			
    9. 
						
  9. 用setTimeout实现与setInteval类似的功能
			
    用setTimeout实现与setInteval类似的功能,代码如下: (function(){ var self = arguments.callee; //获取函数本身 count++; if ( ...
    
			
    10. 
						
  10. iOS开发传感器相关
			
    手机里面内置了很多的传感器,例如:光传感器,湿度传感器,温度传感器,距离传感器等等 //开发传感器相关的东西必须使用真机 //在螺旋仪和加速计所有两种方式push和pull的方式,push的方式是时时 ...
    
			
    11.