sticky-footer的三种解决方案
2018-01-18 本文已影响56人
BULL_DEBUG
在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送，我们看到的效果就如下面两张图这样。这种效果基本是无处不在的，很受欢迎
sticky
image
那么面对这样的问题有什么解决方法呢？首先我们先构建简单的代码
<body>
<div class="content"></div>
<div class="footer"></div>
</body>
其中content为我们的内容区。下面开始介绍解决方法。
一、为内容区域添加最小的高度
这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。例如我们可以添加如下样式：
body {
width: 100%;
padding: 0;
margin: 0;
}
.content {
background: #bdbdbb;
color: white;
width: 100%;
min-height: calc(100vh - 100px);
/* min-height: calc(100vh-200px); // footer的高度 */
/* box-sizing: border-box; */
/* min-height: -moz-calc(90%);
min-height: -webkit-calc(90%);
min-height: -o-calc(90%);
min-height: -ms-calc(90%);
min-height: calc(90%); */
}
.footer {
width: 100%;
height: 100px;
color: white;
background: black;
}
从而这个问题就解决了，但是如果页面的footer高度不同怎么办?每一个页面都要重新计算一次，这是很麻烦的，所以这种方法虽然简单但却是不推荐的。
二、使用flex布局
这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。
代码如下：
body {
display: flex;
flex-flow: column;
min-height: 100vh;
padding: 0;
margin: 0;
}
.content {
background: #bdbdbb;
color: white;
width: 100%;
flex: 1;
}
.footer {
width: 100%;
height: 100px;
color: white;
background: black;
flex: 0;
}
这样的布局简单使用，比较推荐。
三、在content的外面可以添加一个wrapper
这种方法就是在content的外面添加一个包裹容易，将html代码改成这样：
<body>
<div class="wrapper">
<div class="content"></div>
</div>
<div class="footer"></div>
</body>
然后添加以下样式：
html, body, .wrapper {
height: 100%;
padding: 0;
margin: 0;
}
body>.wrapper {
height: auto;
min-height: 100%;
background: #bdbdbb;
}
.content {
padding-bottom: 100px;
/* 必须使用和footer相同的高度 */
color: white;
width: 100%;
}
.footer {
position: relative;
margin-top: -100px;
/* footer高度的负值 */
height: 100px;
clear: both;
width: 100%;
color: white;
background: black;
}
另外，为了保证兼容性，需要在wrapper上添加clearfix类。其代码如下：
<body>
<div class="wrapper clearfix">
<div class="content"></div>
</div>
<div class="footer"></div>
</body>
.clearfix{
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ok,好，完成了，这种方法也比较推荐，但就是加入的代码比较多，也改变了html的文档结构。
