Sticky footer实现
Posted 一片叶子啊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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方法比较耗性能。
以上是关于Sticky footer实现的主要内容，如果未能解决你的问题，请参考以下文章