在挪动Web网页页面中应用CSS固定不动页脚

日期:2020-12-12 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

1种单页运用的网页页面构造

朝向挪动端单页运用(Single Page Web Application),从网页页面编码上来讲,会应用较1般网页页面不一样的构造。单页运用其实不是说运用只必须1个主视图,而是说能够将构成运用的好几个主视图结合在1个网页页面内展现,且在主视图之间可以随意切换(光滑的动漫方式占多数)。

我制做单页运用应用的是1种普遍方式,像下面这样:

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.     displaynone;   
  9.     positionabsolute;   
  10.     width: 100%;   
  11.     height: 100%;   
  12.     left: 0;   
  13.     top: 0;   
  14. }   
  15. .view-current{   
  16.     displayblock;   
  17. }  

能够看出,其基本原理是主视图都由肯定精准定位的遮盖显示屏尺寸(可见视口)的元素组成,在某1時间点,只会显示信息1个主视图。
固定不动页脚的难题

那末,固定不动页脚是1个甚么难题呢?请看下图:

先说说甚么是固定不动页脚吧。上图右能够看到,当网页页面內容较多,超过1屏的高宽比时,页脚是“当然地”紧跟在內容后面,翻转究竟部时,才会看到坐落于最正下方的页脚。另外,上图左能够看到,当网页页面內容较少时,页脚则立即坐落于显示屏最正下方,剩下地区则是空白。这便是固定不动页脚,它能够算是1种较为理想化的“一直在它应当在的部位”的页脚。

那末,难题来了。参照上图左,除固定不动页脚的实际效果以外,如今还规定当网页页面內容较少时,网页页面內容(Content)能够水平竖直垂直居中于剩下的室内空间(Container)。在上述单页运用的网页页面构造中,应当怎样完成呢?
方式讨论
水平竖直垂直居中与Flexbox

让大家1步1步来。先进行“水平竖直垂直居中”。因为內容高宽比不确定性,因此这里合适应用延展性盒实体模型(Flexbox)。

有关延展性盒实体模型的指南,强烈推荐阅读文章A Complete Guide to Flexbox 和Dive into Flexbox 。

运用Flexbox完成水平竖直垂直居中能够先获得这样的编码(因为别的主视图已不必须,这里只保存1个主视图):

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-contentcenter;   
  14.     justify-contentcenter;   
  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-bottom120px;   
  5.     -webkit-box-sizing: border-box;   
  6.     box-sizing: border-box;   
  7. }   
  8. .footer{   
  9.     height120px;  /*假设页脚的高宽比为120px*/  
  10. }  

以上便是在这类标准下的固定不动页脚的完成方式。尽管最终看起来只是这样1小段编码,但我還是思索了非常1段時间再加实验才获得。在其中padding-bottom和负值的margin-bottom的融合运用很重要。另外,做为挪动端网页页面,要想起应用box-sizing这个相互配合百分比会十分有效的CSS3特性。
别的方式的尝试?

我也试过应用主轴为竖直方位的Flexbox来完成,但可是历经检测,flex-direction: column;都还没被如今的流行手机上访问器所适用。
传统式网页页面的固定不动页脚

有关传统式网页页面的固定不动页脚,有1个专业的站点HTML5 CSS Sticky Footer详细介绍了实际上现方式和基本原理,你还可以阅读文章我之前写的简易完成固定不动在网页页面底部的页脚。
结语

挪动Web单页运用的网页页面构造是较为非常,因此固定不动页脚这么有效的物品做起来又是1个新话题了。想起并实验取得成功后,我第1反映便是赶快记下来,简直担忧之后忘记了还得费力重想...

假如你也碰到过相近的要求或有过相近的念头,坚信本文能够出示1点参照!