您的位置：首页 > Web前端 > CSS

粘连 Footer 的 5 种方法 | CSS-Tricks

2016-06-29 10:58 627 查看

原文链接： https://css-tricks.com/couple-takes-sticky-footer/

一个简短的历史，如果你愿意那样说的话。

粘连 footer 的目的是让它“支撑”在浏览器窗口的底部。但不总是在底部，如果有足够的内容将页面撑开，footer 可以被撑到网页下方去。但是，如果页面的内容很短，粘连 footer 仍然会出现在浏览器窗口的底部。

在 wrapper 上用负的 margin-bottom

用一个元素将除了 footer 之外的其他内容包起来。给它设一个负的 margin-bottom，让它正好等于 footer 的高度。这是一个最基本的方法（例子）。

例子：用负 margin 粘连 footer

<body>
<div class="wrapper">

content

<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>

html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;

/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}

这个方法需要在内容区域加一个额外的元素（

.push

元素），这样确保不会因为负
margin 将 footer 提升上来而覆盖了任何实际内容。

.push

元素也最好不要有自己的
margin-bottom，如果有，那么它也得算在负 margin 中，而这又会使得

push

的
height 和

.wrapper

的
margin-bottom 的数字不一样，看起来也不是很好。

在 footer 上用负的 margin-top

用这个技术不需要一个 push 元素，但是相应地，在内容外面需要额外再包一层元素来让它产生对应的 padding-bottom。这也是为了防止负
margin 导致 footer 覆盖任何实际内容。

例子：用负 margin 粘连 footer 2

<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body>

html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}

这个技术和前一个一样有个缺点，就是它们都需要添加额外的 HTML 元素。

通过 calc( ) 减少 wrapper 高度

有一个不需要添加额外元素的方法，那就是通过 calc( ) 调整
wrapper 的高度。这样不需要任何附加的元素，只需要两个元素并排共用 100% 高度。

例子：Sticky Footer with calc( );

<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>

.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}

注意我这里用 calc( ) 扣除了 70px，把 footer 固定为 50px。这是假设内容中的最后一个元素有一个 20px 的 margin-bottom。这个 margin-bottom 和 footer 的高度要加在一起从 viewport 高度中扣除。而且，我们在这里还用了 viewport 单位（

vh

——译者注），这是另外一个小技巧，因为如果用
100% 作为 wrapper 的高度，那我们还得先把 body 的高度设为 100%。

使用 flexbox

上面三种技术的大问题是它们需要 footer 的高度固定。Web 设计中固定高度通常都不好。内容可能改变。我们需要灵活性。固定高度通常要被亮红灯。使用
flexbox 来实现粘连 footer 不仅不需要任何额外的元素，还可以支持 footer 可变高度。

例子：用 Flexbox 粘连 Footer

<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>

html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}

你甚至可以添加一个 header 到

.content

前面或者其他更多内容到后面。使用
flexbox 的诀窍是：
设置

flex:
1

在你希望自动填充窗口空间的子元素上（在我们的例子里是

.content

元素）。
或者，可以设置

margin-top:auto

来让子元素尽可能远离它前面的元素（或者根据需要选择任意一个方向的
margin）。（上面的

flex:1

也可以用

margin-bottom:auto

，内容垂直居中可以用

margin:auto
0

，flex 布局很奇妙吧——译者注）

记得我们有一个关于一切 flexbox 相关内容的完整的指南。

使用 grid

Grid 布局是一种更新的技术（目前支持它的浏览器比 flexbox 更少）。我们也有一个关于它的完整的指南。用它实现粘连
footer 也相当容易。

例子：用 Grid 粘连 footer

<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>

html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}

这个例子只能在 Chrome Canary 或者 Firefox 开发版上工作，并且可能在 Edge 下被降级到旧的 grid 布局版本。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 粘连 Footer flexbox grid

相关文章推荐

新的分享

章节导航