<html>

<head></head>

<body>

    <div class="page-wrapper">

        <div class="page-content">内容部分</div>

    </div>

    <footer class="footer">这里是页面底部</footer>

</body>

</html>

//css

html, body{

　　height: %;

}

footer{

  height: 50px;

  line-height: 50px;

  background-color: #62f1c3;

  text-align: center;

}

1、position: fixed

//css
.page-wrapper{
　　padding-bottom: 50px;
}
.footer{
　　position: fixed;
　　width: 100%;
　　bottom: 0;
}

2、footer前的元素使用负margin-bottom

.page-wrapper{

    height: 100%;

    padding-bottom: 50px;

    margin-bottom: -50px;

    overflow-y: auto;

}

3、footer元素使用负margin-top



 


.page-wrapper{
    height: 100%; 
    padding-bottom: 50px;

    overflow-y: auto;

}

.footer{

    margin-top: -50px;

}




4、使用calc()计算内容部分的高度




.page-wrapper{

    height: calc(% - 50px);

    overflow-y: auto;

}




5、使用flex-box布局




body{

   display: flex;

    flex-direction: column;

}

.page-wrapper{

    flex:   auto;
    overflow-y: auto;

}

.footer{

   flex:   auto;

}


												


											
css固定footer到浏览器底部的方法的更多相关文章
	

    
								
  1. 实现自适应位置--footer紧贴浏览器底部
		
    <!DOCTYPE HTML><html><head><meta charset="utf-8"><title>紧贴浏览 ...
    
		
    2. 
						
  2. IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总
		
    断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...
    
		
    3. 
						
  3. 记一些让footer始终位于网页底部的方法
		
    上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...
    
		
    4. 
						
  4. 将HTML页面页脚固定在页面底部(多种方法实现)
		
    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...
    
		
    5. 
						
  5. 网站设计:将Footer固定在浏览器底部
		
    在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部. function fi ...
    
		
    6. 
						
  6. CSS实现Footer固定底部，超过一屏自动撑开
		
    方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...
    
		
    7. 
						
  7. 如何让你的 footer 总是在浏览器底部无论什么分辨率无论什么浏览器？
		
    一个可以用的CSS驱动的可粘在底部的Footer 我们曾经都或多或少的试过用CSS来把Footer固定在底部的经理,但是他们总是不能正常的粘在底部,不是吗?可喜的是,痛苦的研究如何让footer粘在底 ...
    
		
    8. 
						
  8. 固定一个div在浏览器底部
		
    转自原文 如何固定一个div在浏览器底部   方法1:使用CSS绝对定位 div{ position:absolute; bottom:0px; left:0px; } 方法2:使用CSS固定定位 d ...
    
		
    9. 
						
  9. footer始终在页面最底部的方法（问题待检验）
		
    一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. http协议、cookie及session
			
    1. HTTP协议是无连接的 网页操作--浏览器--Http协议--web服务器(appache/IIS) 无连接的 每次连接只处理一个请求,服务器处理完并收到客户端应答,即断开连接 目的:节省传输时 ...
    
			
    2. 
						
  2. 用MVC5+EF6+WebApi 做一个小功能(二) 项目需求整理
			
    在一个项目开始前,需求整理大概要占到整个项目周期15%甚至30%的比重,可以说需求理得越清楚,后续开发中返工几率越小.在一个项目中,开发新功能的花费的精力要远远小于修改功能的精力,这基本是一个共识.老 ...
    
			
    3. 
						
  3. Redis——基础数据结构
			
    Redis提供了5种基础数据结构,分别是String,list,set,hash和zset. 1.String Redis所有的键都是String.Redis的String是动态字符串,内部结构类似J ...
    
			
    4. 
						
  4. JAVA设计模式详解（三）----------装饰者模式
			
    今天LZ带给大家的是装饰者模式,提起这个设计模式,LZ心里一阵激动,这是LZ学习JAVA以来接触的第一个设计模式,也许也是各位接触的第一个设计模式.记得当初老师在讲IO的时候就提到过它:“是你还有你, ...
    
			
    5. 
						
  5. HDU3829(KB10-J 二分图最大独立集)
			
    Cat VS Dog Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 125536/65536 K (Java/Others)Total ...
    
			
    6. 
						
  6. 关于SDN
			
    传统网络: 一:它们是纯分布式控制 二:控制面和转发面在同一个设备中,紧密耦合 三:管理员无法直接操控转发行为 四:网络协议对转发行为的影响是有固定模式的 而SDN的特性: 一:控制面与转发面分离 二 ...
    
			
    7. 
						
  7. 集合框架四（Map）
			
    Map的主要实现类: --HashMap:Map的主要实现类(掌握) --LinkedHashMap:使用链表维护添加进Map中的顺序,遍历时按添加时的顺序遍历 --TreeMap:按照添加进Map中 ...
    
			
    8. 
						
  8. OSGI企业应用开发（十二）OSGI Web应用开发（一）
			
    前面文章中介绍了如何在OSGI应用中整合Spring和Mybatis框架,本篇文章开始介绍如何使用OSGI技术开发Web应用.对于传统的Java EE应用,应用中涉及到的Web元素无非就是Servle ...
    
			
    9. 
						
  9. Vue -- vue-cli(vue脚手架)  npm run build打包优化
			
    这段时间公司新项目立项,开发组选用 Vue2.0 进行开发.当然也就一并用到 vue cli 进行自动化构建.结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题 ...
    
			
    10. 
						
  10. 使用ADB无线连接Android真机进行调试
			
    使用ADB无线连接Android真机进行调试   其实这已经是一个很古老的知识了,记录一下备忘. 准备工作 手机和电脑需要在同一个局域网内 电脑上已经安装好ADB工具,可以是Mac或者Windows  ...
    
			
    11.