Fork me on GitHub

固定页脚的方法

frontend/css/fixed-footer-methods/banner

在页面的开发过程中,会遇到屏幕的内容比较少,那么如果按照传统的布局的话,页脚就会上移,造成页脚底部有空余的空间,很不是美观。那么,我们应该进行相关的处理,使得内容较少的时候,页脚是固定在页面的底部的。

下面针对存css和javascript与css结合给出下面的几种方法:

使用margin-bottom为负数

1
2
3
4
<div class="wrapper">
content
</div>
<div class="footer">footer</div>
1
2
3
4
5
6
7
8
9
10
11
12
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px; /* 等于footer的高度 */
}
.footer, .push {
height: 50px;
}

div.wrapper的margin-bottom需要和div.footer的-height值一样,注意是负height

将页脚的margin-top设为负数

给内容外增加父元素,并将内容部分的padding-bottom与页脚的height相等。

1
2
3
4
5
6
<div class="content">
<div class="content-inside">
content
</div>
</div>
<div class="footer">footer</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}

使用calc()计算

calc()函数用于动态计算长度值。传送门

1
2
3
4
<div class="content">
<!-- content -->
</div>
<div class="footer">footer</div>
1
2
3
4
5
6
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}

使用flexbox弹性盒布局

上面的几种方法的footer高度都是固定的,如果其内容过多的话就会破坏布局的,比较友好的有以下的解决:flex和grid。

1
2
3
4
<div class="content">
<!-- content -->
</div>
<div class="footer">footer</div>
1
2
3
4
5
6
7
8
9
10
11
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}

使用grid网格布局

display:grid应该说是一个display的属性值,相关的知识点可以戳这里了解更多。

1
2
3
4
<div class="content">
content
</div>
<div class="footer">footer</div>
1
2
3
4
5
6
7
8
9
10
11
12
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}

结合js和min-height

使用js进行页面的高度的获取,再减去底部的footer的高度,之后设置min-height就行。

1
2
3
4
5
<div class="content">
content
</div>
<div class="footer">
</div>
1
2
3
4
5
6
7
html,body{
margin: 0;
padding: 0;
}
.footer{
height: 50px;
}
1
2
3
4
5
6
7
// 获取浏览器的宽高
getClient() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}

后话

部分内容参考网络,欢迎指正!

<-- 本文已结束  感谢您阅读 -->
客官,且步,赏一个呗 (@ ~ @)