资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

怎么在移动Web页面中使用CSS固定页脚

本篇内容介绍了“怎么在移动Web页面中使用CSS固定页脚”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

在湖北等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供做网站、成都网站建设 网站设计制作按需定制,公司网站建设,企业网站建设,品牌网站建设,营销型网站,外贸网站建设,湖北网站建设费用合理。

一种单页应用的页面结构

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

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

CSS Code复制内容到剪贴板

  1.   

  2.     

  

  •     

    •   

  •     

    •   

  •   

  •   

  • .view-page{   

  •     display: none;   

  •     position: absolute;   

  •     width: 100%;   

  •     height: 100%;   

  •     left: 0;   

  •     top: 0;   

  • }   

  • .view-current{   

  •     display: block;   

  • }  

    • 可以看出，其原理是视图都由绝对定位的覆盖屏幕大小（可见视口）的元素构成，在某一时间点，只会显示一个视图。
    固定页脚的问题

    那么，固定页脚是一个什么问题呢？请看下图：
    怎么在移动Web页面中使用CSS固定页脚

    先说说什么是固定页脚吧。上图右可以看到，当页面内容较多，超出一屏的高度时，页脚是“自然地”紧跟在内容后边，滚动到底部时，才会看到位于最下方的页脚。同时，上图左可以看到，当页面内容较少时，页脚则直接位于屏幕最下方，剩余区域则是空白。这就是固定页脚，它可以算是一种比较理想的“总是在它应该在的位置”的页脚。

    那么，问题来了。参考上图左，除了固定页脚的效果之外，现在还要求当页面内容较少时，页面内容（Content）可以水平垂直居中于剩余的空间（Container）。在上述单页应用的页面结构中，应该如何实现呢？
    方法探讨
    水平垂直居中与Flexbox

    让我们一步一步来。先完成“水平垂直居中”。由于内容高度不确定，所以这里适合使用弹性盒模型（Flexbox）。

    关于弹性盒模型的指南，推荐阅读A Complete Guide to Flexbox 和Dive into Flexbox 。

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

    CSS Code复制内容到剪贴板

    1.   

    2.        

    3.            

    4.                

    5.            

    6.        

    7.   

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

    CSS Code复制内容到剪贴板

    1. .container{   

    2.     min-height: 100%;   

    3. }  

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

    CSS Code复制内容到剪贴板

    1. .flex-container{   

    2.     display: -webkit-box;   

    3.     display: -webkit-flexbox;   

    4.     display: -ms-flexbox;   

    5.     display: -webkit-flex;   

    6.     display: flex;   

    7. }   

    8.   

    9. .justify-content-center{   

    10.     -webkit-box-pack: center;   

    11.     -webkit-flex-pack: center;   

    12.     -ms-flex-pack: center;   

    13.     -webkit-justify-content: center;   

    14.     justify-content: center;   

    15. }   

    16.   

    17. .align-items-center{   

    18.     -webkit-box-align: center;   

    19.     -webkit-flex-align: center;   

    20.     -ms-flex-align: center;   

    21.     -webkit-align-items: center;   

    22.     align-items: center;   

    23. }  

    到此，水平垂直居中就完成了。
    实现固定页脚

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

    CSS Code复制内容到剪贴板

    1.   

    2.        

    3.            

    4.                

    5.            

    6.            

    7.        

    8.   

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

    CSS Code复制内容到剪贴板

    1. .container{   

    2.     min-height: 100%;   

    3.     margin-bottom: -120px;   

    4.     padding-bottom: 120px;   

    5.     -webkit-box-sizing: border-box;   

    6.     box-sizing: border-box;   

    7. }   

    8. .footer{   

    9.     height: 120px;  /*假定页脚的高度为120px*/  

    10. }  

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

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

    关于传统网页的固定页脚，有一个专门的站点HTML5 CSS Sticky Footer介绍了其实现方法和原理，你也可以阅读我以前写的简单实现固定在页面底部的页脚。

    “怎么在移动Web页面中使用CSS固定页脚”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


    网页名称：怎么在移动Web页面中使用CSS固定页脚
    当前URL：http://cdkjz.cn/article/pdhheh.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    服务器托管网站建设方案卖链接成都未宇聚网站设计公司蓬安网站建设温江网站建设网站seo优化网站优化公司巴中倍辉科技

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图