HTML5的footer怎么在body的内容不满一屏幕时置于页面最底部？求大神指点，谢谢！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5的footer怎么在body的内容不满一屏幕时置于页面最底部？求大神指点，谢谢！相关的知识，希望对你有一定的参考价值。
<footer>
<div class="container">
<p>地址：深圳深南大道2008号中国凤凰大厦1栋13层</p>
<p>copyright © 琴韵天下版权所有 ICP备案：粤ICP备09066181号-3</p>
</div>
</footer>
position:absolute;
bottom: 0px;
left:0px;追问
这个只适应不满一个屏的情况，但如果他有4个屏的长度最后一屏不满，要求footer至底，，这句代码只会在第一屏就至底，求指教。谢谢
追答你要清楚。footer所在的底部，不是body的底部，而是浏览器的底部！你要求的是在body的底部？
追问是的
追答 <header><!--头部--></header><section><!--内容--></section>
<footer><!--尾部--></footer>section
width:99.5%;
overflow-x:hidden;
overflow-y:auto;
height:100%;
header
width:100%;
height:50px;
font-family:"微软雅黑";
box-shadow: 0px 0px 5px #888888;
background:#fff;
position:absolute;
left:0px;
top:0px;
z-index:999;
footer
position:absolute;
bottom: 0px;
left:0px;
width: 100%;
height: 50px;
z-index:999;
background:#fff;
box-shadow: 0px 0px 5px #888888;
Sticky footer实现
常有这样的需求，比如将footer“固定”在底部，如果内容区没有占满整个屏幕，footer固定在底部，若内容区超过屏幕，则footer处于内容区的尾部。总之就是内容铺不满，footer固定在窗口底部，若内容能铺满，则处于内容区下面。
HTML结构：
<body> <div class="container"> <div class="main">
balabalbalabla </div> </div> <div class="footer">Footer</div> </body>
CSS部分，有两种方法，
1. footer固定高度，container设置最小高度。
* { margin:0; padding:0; } html, body { height: 100%; } .container { min-height: calc(100vh - 80px); } .footer { height: 80px; background-color: grey; }
2. footer固定高度，main设置padding-bottom等于footer的高度，然后footer设置margin-top为footer的高度。
* { margin:0; padding:0; } html, body { height: 100%; } .container { min-height: 100%; } .main { padding-bottom: 80px; } .footer { background-color: grey; margin-top: -80px; height: 80px; }
个人喜欢第二种方法，calc方法比较耗性能。
以上是关于HTML5的footer怎么在body的内容不满一屏幕时置于页面最底部？求大神指点，谢谢！的主要内容，如果未能解决你的问题，请参考以下文章