Re:从零开始的页脚布局解决方案

什么是紧贴底部的页脚的布局?

从字面上理解,它是一种布局方式,满足:

  1. 当页面高度不足以撑满浏览器视窗时,页脚紧贴视窗底部
  2. 当页面高度能够撑满浏览器视窗时,页脚紧贴页面尾部

当然,这种需求用CSS或JS都可以实现,但推荐的是 能用CSS实现的效果,就不要用JS

这里整理了几种常用的方式:

  1. 负边距
  2. 绝对定位
  3. CSS calc
  4. CSS flex

1. CSS Negative Margin

DOM:

<div class="wrap">
    <div class="main"></div>
</div>
<div class="footer">Footer</div>

这种结构下,footer 和 wrap 属于同辈关系,可以使用负边距来实现,

示例地址:Method negative margin

CSS:

<style>
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.wrap {
    min-height: 100%;
}

.main {
    padding-bottom: 100px; /* be same height as the footer*/
}

.footer {
    height: 100px;
    margin-top: -100px; /* negative value of footer height */
}
</style>

2. CSS position: absolute

在这种结构下,footer 是 wrap 的子元素,使用定位元素 relative、absolute 来布局。

示例地址:Method position

DOM:

<div class="wrap">
  <div class="main"></div>
  <div class="footer">Footer</div>
</div>

CSS:

<style>
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.wrap {
    position: relative;
    min-height: 100%;
}

.main {
    padding-bottom: 100px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
}
</style>

3. CSS calc

在 calc() 中使用加减法时要特别当心:记得在 + 和 - 运算符的左右各加一个空格,这条规则是为了向前兼容。在未来某个时候,calc() 内部可能会允许使用关键字,那么CSS解析器就需要有依据来区分关键字中的连字符和减号运算符。

示例地址:Method calc

DOM:

<div class="wrap">
  <div class="main"></div>
</div>
<div class="footer">Footer</div>

CSS:

<style>
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.wrap {
    min-height: calc(100vh - 100px); /* calculate viewport height minus footer height*/
}

.footer {
    height: 100px;
}
</style>

4. CSS flex

示例地址:Method flex

DOM:

<div class="wrap">
  <div class="main"></div>
</div>
<div class="footer">Footer</div>

CSS:

<style>
html,
body {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

.wrap {
    flex: 1;
}
</style>

SUMMARY

页面开发,布局为大,页脚紧贴底部的需求普遍存在,传统的解决方案往往需要按照特定的结构来写(参考方法一、方法二),不过,在现代CSS的协助下,我们可以做的更好(参考方法三、方法四)。