简易实现页面底部导航:利用CSS布局控制Footer的方法
最编程
2024-02-09 13:37:37
...
效果:
内容少于浏览器视窗时,footer在视图最下;
内容多于浏览器当前视窗时,footer在内容下面。
总之,一直在最下不会飘到中间……
HTML结构
<div class="wrapper">
<div class="content">内容</div>
<div class="footer">页脚</div>
</div>
html, body {
height: 100%;
}
.wrapper {
position: relative;
min-height: calc(100% - 40px); //这里可以调整一下
padding-bottom: 40px;
box-sizing: border-box;
}
.footer {
position: absolute;
bottom: 0;
height: 40px;
width: 100%;
text-align: center;
line-height: 40px;
}
参考
https://aotu.io/notes/2017/04/13/Sticky-footer/
http://www.jianshu.com/p/c91eee6849cb
http://blog.****.net/zhooson/article/details/69396765