sticky-footer的三种解决方案

快来打我* 2021-09-15 10:26 356阅读 0赞

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送，我们看到的效果就如下面两张图这样。这种效果基本是无处不在的，很受欢迎。

![20180514090800721][]

那么面对这样的问题有什么解决方法呢？

首先我们先构建简单的代码

其中content为我们的内容区。下面开始介绍解决方法。  
一、为内容区域添加最小的高度

这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。例如我们可以添加如下样式：

.content{
         min-height:calc(100vh-footer的高度);
         box-sizing:border-box;
    }

从而这个问题就解决了，但是如果页面的footer高度不同怎么办?每一个页面都要重新计算一次，这是很麻烦的，所以这种方法虽然简单但却是不推荐的。  
  
二、使用flex布局  
　　这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。

代码如下：

body { 
        display: flex; 
        flex-flow: column; 
        min-height: 100vh;
     }
     .content {
        flex: 1; 
    }
    .footer{
        flex: 0;      
    }

这样的布局简单使用，比较推荐。  
  
  
三、在content的外面可以添加一个wrapper

这种方法就是在content的外面添加一个包裹容易，将html代码改成这样：

然后添加以下样式：

html, body, .wrapper {
         height: 100%;
    }
    body > .wrapper {
         height: auto; min-height: 100%;
    }
    .content {
        padding-bottom: 150px; /* 必须使用和footer相同的高度 */
    }  
    .footer {
        position: relative;
        margin-top: -150px; /* footer高度的负值 */
        height: 150px;
        clear:both;
    }

另外，为了保证兼容性，需要在wrapper上添加clearfix类。其代码如下：

.clearfix{
         display: inline-block;
    }
    .clearfix:after {
         content: ".";
         display: block;
         height: 0;
         clear: both;
         visibility: hidden;
    }

ok,好，完成了，这种方法也比较推荐，但就是加入的代码比较多，也改变了html的文档结构。

![20180514092117981][]

参考：[CSS秘密花园： Sticky footers][CSS_ Sticky footers]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style type="text/css">
    		html, body, .wrapper {
                height: 100%;
                padding: 0;
                margin: 0;
            }
            
            body>.wrapper {
                height: auto;
                min-height: 100%; 
                background: #f00;
            }
            .content {
                padding-bottom: 200px;
                font-size: 30px;
            }
            .footer {
                position: relative;
                margin-top: -200px;
                /* footer高度的负值 */
                height: 200px;
                clear: both;
                width: 100%;
                color: white;
                background: black;
                font-size: 20px;
            }
    
    		.clearfix{
    		     display: inline-block;
    		}
    		.clearfix:after {
    		     content: ".";
    		     display: block;
    		     height: 0;
    		     clear: both;
    		     visibility: hidden;
    		}   
    	</style>
    </head>
    <body>
    	<div class="wrapper clearfix">
    		<div class="content">
    			这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制，但使用现代CSS，我们能把这个效果做得更好，那要如何做呢？
    
    			如果你从未看过这样的效果或者对这个问题的相关资料感兴趣的话，这里有一些受欢迎的文章，提供
    		</div>
    	</div>　
    	<div class="footer">
    		这似乎略优于现有的固定高度的解决方案，主要是由于其简单。然而，除了简单的布局，但这是不切合实际。它要求我们每次都要计算包裹页脚文本容器的高度，这样我们需要每次计算容器的min-height。除非我们愿意添加HTML容器来包裹我们的标题和内容，不过同意也要计算。当然，在这个时代，我们可以做得更好，对吗？著作权归作者所有。
    	</div>
    </body>
    </html>

[20180514090800721]: /images/20210813/4c3b0081f5094292ada2138e11c3a715.png
[20180514092117981]: /images/20210813/8bc92cd913ee4d3999bc0add44d42368.png
[CSS_ Sticky footers]: https://www.w3cplus.com/css3/css-secrets/sticky-footers.html