脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

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

ACGTOFE   发布时间：2015-07-28 16:47:48   作者：梁砫   我要评论
这篇文章主要介绍了在移动Web页面中使用CSS固定页脚,作者推荐使用box-sizing的百分比调整方法,需要的朋友可以参考下

一种单页应用的页面结构

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

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

CSS Code复制内容到剪贴板
  1. <body>   
  2.     <div class="view-page view-current"></div>   
  3.     <div class="view-page"></div>   
  4.     <div class="view-page"></div>   
  5. </body>   
  6.   
  7. .view-page{   
  8.     display: none;   
  9.     position: absolute;   
  10.     width: 100%;   
  11.     height: 100%;   
  12.     left: 0;   
  13.     top: 0;   
  14. }   
  15. .view-current{   
  16.     display: block;   
  17. }  

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

那么，固定页脚是一个什么问题呢？请看下图：
2015728165536806.png (380×313)

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

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

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

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

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

CSS Code复制内容到剪贴板
  1. <body>   
  2.     <div class="view-page view-current">   
  3.         <div class="container flex-container justify-content-center align-items-center">   
  4.             <div class="content"></div>   
  5.         </div>   
  6.     </div>   
  7. </body>  

上面的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. <body>   
  2.     <div class="view-page view-current">   
  3.         <div class="container flex-container justify-content-center align-items-center">   
  4.             <div class="content"></div>   
  5.         </div>   
  6.         <div class="footer"></div>   
  7.     </div>   
  8. </body>  

注意，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盒子模型、圆角边框、盒子阴影效果实现

    盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内
    2024-10-18

  • CSS盒子模型、圆角边框、盒子阴影效果实现

    盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内
    2024-10-18

  • CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)

    本文详细介绍了CSS3中的两个实现高斯模糊效果的API：filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效
    2024-09-26

  • CSS 中的overscroll-behavior属性详解

    overscroll-behavior是CSS中用于控制元素滚动边界行为的属性,可通过设置为auto、contain或none来指定当元素滚动超出边界时的处理方式,本文给大家介绍CSS 中的overscroll-be
    2024-09-26

  • css实现四角边框效果

    本文介绍了如何通过CSS实现具有四角边框的效果,使用了linear-gradient和background属性来创建边框,并设置了背景尺寸,文章还提供了Vue中图片资源引用的示例代码,适合想要为
    2024-09-24

  • CSS的:required和:optional伪类：如何增强表单字段的视觉识别

    在网页设计中,使用CSS的:required和:optional伪类可以有效增强表单字段的视觉识别,提升用户体验和表单的可访问性,这两个伪类分别用于区分必填和非必填字段,通过添加不同的
    2024-09-18

  • css边框修饰实现代码

    本文介绍了CSS中设置边框的几种主要属性,包括边框样式（如实线、虚线等）、边框宽度（可以单独设置每个方向的宽度）、边框颜色（支持单独为每个方向设置颜色）以及圆角边框
    2024-09-18

  • 如何利用CSS实现视差滚动和抖动效果

    通过CSS3和JS,实现前端炫酷的视差滚动和抖动效果,本文详细介绍了相关CSS样式和JS脚本,通过监听滚动条位置并调整元素的top属性来达到视差效果,当到达特定位置时,利用CSS动画
    2024-09-13

  • CSS文本超出后隐藏并显示省略号及其他浏览器兼容方案(推荐)

    在CSS中，可以通过简单的样式设置实现文本超出隐藏并显示省略号的效果,这些方法主要适用于WebKit内核的浏览器，对于其他浏览器，可采用JavaScript或CSS Fallback等方案,文
    2024-09-11

  • css 自定义变量 var()案例分析

    这篇文章主要介绍了css 自定义变量 var()案例分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，感兴趣的朋友跟随小编一起看看吧
    2024-08-28

最新评论

关注微信公众号

扫一扫