本文主要介绍了CSS固定页脚在移动网页中的应用。介绍了纸箱上浆的比例调整法。





单页应用程序的页面结构

移动端的单页Web应用程序，从页面代码中，将使用与一般Web页面不同的结构。单页应用程序并不意味着应用程序只需要一个视图，但是应用程序的多个视图集合可以呈现在Web页面中，并且可以在视图之间自由切换。

这是制作单页应用程序的常见方法，如下所示：

CSS代码将内容复制到剪贴板。








查看页面{
显示：无；
位置：绝对；
宽度：100%；
身高：100%；
左：0；
顶部：0；
}
查看当前{
显示块；
}




可以看出，原理是通过绝对定位屏幕大小（可见视口）元素，在某一时间点，只显示一个视图。
固定页脚的问题

那么，修复页脚的问题是什么呢请看下面的图片。


让我们以一个固定的页脚开始。你可以看到在图片的右边，当网页内容超过一屏的高度，页脚是是自然的；当它滚动后面的内容，会看到在底部的页脚。同时，作为你可以看到在左边，当页面内容较少，页脚是直接在屏幕下方，和其余的是空白。这是固定页脚，这可以被认为是一个理想的总是在位置应该在页脚。

那么，问题来了。参照上图左边，除了固定页脚的效果，我们还需要在页面内容比较少，网页内容（内容）可以水平和垂直居中的剩余空间（容器），应该在上述单页面应用程序页面结构做了什么
方法的探讨
水平垂直中心和Flexbox

让我们一步一步一步的完成，第一；水平垂直中心，因为内容是高度的不确定性，它适合使用弹性盒模型（flexbox）。

在弹性盒模型的指导，建议读一个完整的指南，flexbox跳进flexbox。

使用flexbox实现水平垂直中心，你可以先把这个代码（从其他视图不再需要时，只有一种观点保留）：

CSS代码将内容复制到剪贴板。













以上div.container对应的剩余空间，在前面的图形（如容器），和div.content是内容需要水平垂直中心对应的CSS：

CSS代码将内容复制到剪贴板。


集装箱{。
最小高度：100%；
}




Flex容器，证明内容中心，并调整项目中心所有的弹性盒模型的辅助类（熟悉flexbox可以迅速了解）。辅助类的使用是因为弹性盒模型已经从先前的改变后，和兼容处理需要一点点的代码。辅助类的CSS：

CSS代码将内容复制到剪贴板。


Flex容器{
显示：WebKit的盒子；
显示：WebKit的flexbox；
显示：MS flexbox；
显示：WebKit的Flex；
显示：flex；
}

为内容中心{
WebKit的纸盒包装：中心；
WebKit的Flex包：中心；
- Flex包：中心；
WebKit的证明内容：中心；
验证内容：中心；
}

对齐项目中心{
Webkit框对齐：中心；
WebKit的Flex对齐：中心；
-女士对齐：中心；
WebKit项目：中心对齐；
对齐项目：中心；
}




在这种情况下，水平垂直中心完成。
实现固定页脚

现在添加页脚部分。此时HTML代码将变成：

CSS代码将内容复制到剪贴板。














注意，div.view-page绝对定位、定义的高度：100%；和div.container还定义了最小高度：在这次100%。考虑的需要；留空间给页脚结合固定页脚在传统的网页来获得一个完整的CSS：

CSS代码将内容复制到剪贴板。


集装箱{。
最小高度：100%；
利润率底：- 120px；
座垫：120px；
Webkit盒尺寸：边界盒；
盒尺寸：边框框；
}
页脚{。
身高：120px； / *页脚假定高度120px * /
}




以上是在此条件下实施固定页脚的方式。虽然看起来就是这样的一个小代码块结束时，我思考了一段时间加上实验。座垫和负相结合的边缘底部的关键。此外，作为一个移动网页，你想的CSS3属性，使用盒子大小的百分比很有用。
其他形式的尝试

我也试过用主轴flexbox实现垂直方向，但不幸的是，经过测试，弯曲方向：柱没有被主流手机浏览器支持。
固定网页页脚传统的网页

关于传统网页的固定页脚，有一个专门的网站HTML5 CSS页脚介绍了它的实现方法和原理。你也可以阅读我以前写过的页脚，它只在页面底部固定。
后记

手机网站的单页面应用页面结构比较特殊，所以做一些非常有用的一个新课题。我认为试验成功后，第一个反应就是赶快下来，真担心还得费劲的想忘记…

如果您遇到类似的需求或有类似的想法，我相信这篇文章可以提供一点参考！