Page 222 - css揭秘
P. 222

41 紧贴底部的页脚






                      背景知识

                      视口相关的长度单位（参见“垂直居中”），calc()



                    难题

                        在网页设计中，存在一个相当古老但又相当常见的问题，它是前端工程
                    师绕不开的坎。这个问题可以简单地概括如下：有一个具有块级样式的页脚
                   （比如它设置了背景或阴影），当页面内容足够长时它一切正常，而当页面较
                                                        1①
                    短时（比如错误信息页面）就会出现问题 。此时的问题在于，页脚不能像我
                    们期望中那样“紧贴”在视口的最底部，而是紧跟在内容的下方。
                        这个问题不仅普遍存在，而且乍看起来确实相当简单。因此，在所
                                              2
                                            ②
                    有“隐蔽大坑”式的难题中 ，它简直就是教科书般的典型案例。不仅如此，
                    CSS 2.1 基本上拿它没有办法：几乎所有的经典解决方案都需要给页脚设置
                    固定的高度，而这显然是不健壮的，也是不实际的。此外，所有这些解决方
                    案都太过复杂、太像 hack 了，而且往往要求网页按照特定的结构来写。在
                    那个年代，受制于 CSS 2.1 有限的能力范围，这已是我们所能达到的最好结
                    果了。不过，在现代 CSS 的协助下，我们可以做得更好吗？如果答案是肯
                    定的，又该如何去做？

                    固定高度的解决方案


                        我们手头的这个页面极其简单，<body> 元素内的结构代码如下所示：




                    ①  具体来说，当页面内容的长度小于视口高度减去页脚高度时，这个问题就会出现。
                    ②  如果你从来没有在这个大坑里体验过疯魔的快感，那不妨来感受一下前人针对这个问题所积
                      累下来的宝贵财富。在 CSS 第三版规范推出之前，这些解决方案曾经挽救过一个又一个的网
                      页开发者：
                      cssstickyfooter.com
                      ryanfait.com/sticky-footer
                      css-tricks.com/snippets/css/sticky-footer
                      pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way
                      mystrd.at/modern-clean-css-sticky-footer
                      最后两个解决方案是这众多链接中最为精简的，但仍然有其局限之处。



                                                                                         41 紧贴底部的页脚           191







          ඀ࠡ  JOEC
   217   218   219   220   221   222   223   224   225   226   227