怎么在移动Web页面中使用CSS固定页脚
本篇内容介绍了“怎么在移动Web页面中使用CSS固定页脚”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
在湖北等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供做网站、成都网站建设 网站设计制作按需定制,公司网站建设,企业网站建设,品牌网站建设,营销型网站,外贸网站建设,湖北网站建设费用合理。
一种单页应用的页面结构
面向移动端的单页应用（Single Page Web Application），从页面代码上来说，会使用较一般网页不同的结构。单页应用并不是说应用只需要一个视图，而是说可以将组成应用的多个视图集合在一个网页内呈现，且在视图之间能够自由切换（平滑的动画形式居多）。
我制作单页应用使用的是一种常见方法，像下面这样：
CSS Code复制内容到剪贴板
.view-page{
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.view-current{
display: block;
}
可以看出，其原理是视图都由绝对定位的覆盖屏幕大小（可见视口）的元素构成，在某一时间点，只会显示一个视图。
固定页脚的问题
那么，固定页脚是一个什么问题呢？请看下图：
先说说什么是固定页脚吧。上图右可以看到，当页面内容较多，超出一屏的高度时，页脚是“自然地”紧跟在内容后边，滚动到底部时，才会看到位于最下方的页脚。同时，上图左可以看到，当页面内容较少时，页脚则直接位于屏幕最下方，剩余区域则是空白。这就是固定页脚，它可以算是一种比较理想的“总是在它应该在的位置”的页脚。
那么，问题来了。参考上图左，除了固定页脚的效果之外，现在还要求当页面内容较少时，页面内容（Content）可以水平垂直居中于剩余的空间（Container）。在上述单页应用的页面结构中，应该如何实现呢？
方法探讨
水平垂直居中与Flexbox
让我们一步一步来。先完成“水平垂直居中”。由于内容高度不确定，所以这里适合使用弹性盒模型（Flexbox）。
关于弹性盒模型的指南，推荐阅读A Complete Guide to Flexbox 和Dive into Flexbox 。
应用Flexbox实现水平垂直居中可以先得到这样的代码（由于其他视图不再需要，这里只保留一个视图）：
CSS Code复制内容到剪贴板