在移动Web单页应用中实现固定页脚

Michael_Lin 发布于2019-08-28 17:58 / 2582人阅读

摘要：考虑到要为页脚留空间，结合传统网页中的固定页脚的做法，得到完整的假定页脚的高度为以上就是在这种条件下的固定页脚的实现方法。结语移动单页应用的页面结构是比较特别，所以固定页脚这么有用的东西做起来又是一个新话题了。

一种单页应用的页面结构

面向移动端的单页应用（Single Page Web Application），从页面代码上来说，会使用较一般网页不同的结构。单页应用并不是说应用只需要一个视图，而是说可以将组成应用的多个视图集合在一个网页内呈现，且在视图之间能够自由切换（平滑的动画形式居多）。

我制作单页应用使用的是一种常见方法，像下面这样：

.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[] 。

应用Flexbox实现水平垂直居中可以先得到这样的代码（由于其他视图不再需要，这里只保留一个视图）：

上面的div.container对应前面图中的剩余空间（作为容器），div.content则是需要水平垂直居中的内容。对应的css是：

.container{
    min-height: 100%;
}

flex-container、justify-content-center、align-items-center都是弹性盒模型的辅助class（熟悉了Flexbox就可以很快理解）。使用辅助class是因为弹性盒模型从前到后几经变化，兼容处理需要稍多代码。这些辅助class的css是：

.flex-container{
    display: -webkit-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.justify-content-center{
    -webkit-box-pack: center;
    -webkit-flex-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.align-items-center{
    -webkit-box-align: center;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

到此，水平垂直居中就完成了。

实现固定页脚

现在加入页脚的部分。这时候html代码变成：

注意，div.view-page是绝对定位，且定义了height: 100%;，而此时div.container也定义了min-height: 100%;。考虑到要“为页脚留空间”，结合传统网页中的固定页脚的做法，得到完整的css：

.container{
    min-height: 100%;
    margin-bottom: -120px;
    padding-bottom: 120px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.footer{
    height: 120px;  /*假定页脚的高度为120px*/
}

以上就是在这种条件下的固定页脚的实现方法。虽然最后看起来只是这样一小段代码，但我还是思考了相当一段时间加上试验才得到。其中padding-bottom和负值的margin-bottom的结合应用很关键。此外，作为移动端的网页，要想到使用box-sizing这个配合百分比会非常有用的CSS3属性。

其他形式的尝试？

我也试过使用主轴为垂直方向的Flexbox来实现，但可惜经过测试，flex-direction: column;还没有被现在的主流手机浏览器所支持。

传统网页的固定页脚

关于传统网页的固定页脚，有一个专门的站点HTML5 CSS Sticky Footer[]。

结语

移动Web单页应用的页面结构是比较特别，所以固定页脚这么有用的东西做起来又是一个新话题了。想到并试验成功后，我第一反应就是赶紧记下来，真是担心以后忘掉了还得费劲重想...

如果你也碰到过类似的需求或有过类似的想法，相信本文可以提供一点参考！

（重新编辑自我的博客，原文地址：http://acgtofe.com/posts/2014/10/sticky-footer-for-single-page-web-app）

云服务器 GPU云服务器 fec在webrtc中实现在浏览器中实现webrtc视频传输中实现单点登录 asp中实现登录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110931.html

wordpress主题酱茄Free v1.0.0开源版自媒体资讯博客主题模板

摘要：主题主题酱茄开源版自媒体资讯博客主题模板酱茄主题由酱茄开发的一款免费开源的主题，主题专为博客资讯自媒体网站而设计，遵循开源协议发布。wordpress主题酱茄Free v1.0.0开源版自媒体资讯博客主题模板酱茄free主题由酱茄开发的一款免费开源的WordPress主题，主题专为WordPress博客、资讯、自媒体网站而设计，遵循GPL V2.0开源协议发布。运行环境酱茄Free主题当前...

番茄西红柿 2021-08-21 14:02 评论0 收藏2637
Web应用程序如何创建 PDF

摘要：在本文中，将探讨如何从一个应用程序中直接生成一个。然而，再次受到浏览器对和支持的限制。使用来实现规范尝试使用实现规范实际上是创建了。就从应用程序使用这些工具而言，需要在服务器上安装它们。希望这是一个有用的工具总结，可用帮你的应用程序创建。为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！在一些场景下，用户都要求一些需要的数...

AlexTuan 2019-08-23 18:40 评论0 收藏0
全新单页JavaScript框架Amaple

摘要：但目前来看，单页应用在技术实现和体验上还有更大的发展空间，而这就是所要推进的。模块化页面模块化单页应用的特点之一是将页面划分为多个模块，跳转时更新模块的内容。与其他单页库相比，它们的职责更清晰，也易于理解。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303);单页Web应用作为新一代Web模式，为用户提供了更流畅的体验满足感...

djfml 2019-08-01 18:13 评论0 收藏0
全新单页JavaScript框架Amaple

摘要：但目前来看，单页应用在技术实现和体验上还有更大的发展空间，而这就是所要推进的。模块化页面模块化单页应用的特点之一是将页面划分为多个模块，跳转时更新模块的内容。与其他单页库相比，它们的职责更清晰，也易于理解。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303);单页Web应用作为新一代Web模式，为用户提供了更流畅的体验满足感...

yanwei 2019-08-22 11:19 评论0 收藏0