HTML中使footer保持在页面底部
sunshj Lv4

当页面中主体内容不够多、无法将内容区域撑开时,会在 footer 下面留下一大块空白。但是又希望footer能在窗口最底端。下面两种方法可以完美解决这个问题

HTML中使footer保持在页面底部

本文转载自CSDN - NINE-NINE

一、footer高度固定+绝对定位

思路:footer的父层的最小高度是100%,footer设置成相对于父层位置绝对(absolute)置底(bottom:0),父层内要预留(padding-bottom)footer的高度。

HTML代码:

1
2
3
4
5
<div id="container">
<header>HEADER</header>
<div class="main">MAIN</div>
<footer>FOOTER</footer>
</div>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#container{
/*保证footer是相对于container位置绝对定位*/
position:relative;
width:100%;
min-height:100%;
/*设置padding-bottom值大于等于footer的height值,以保证main的内容能够全部显示出来而不被footer遮盖;*/
padding-bottom: 100px;
box-sizing: border-box;
}
header{
width: 100%;
height: 200px;
background: #999;
}
.main{
width: 100%;
height: 200px;
background: orange;
}
footer{
width: 100%;
height:100px; /* footer的高度一定要是固定值*/
position:absolute;
bottom:0px;
left:0px;
background: #333;
}

如果在main区域设置了浮动啥的你会发现footer固定在页面可视区的底部,且覆盖在内容上,这时候只要在footer的父元素样式上增加(overflow : hidden;)即可;

二、采用 flexbox布局模型

思路:我们将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, (默认是行,也就是横向布局);同时,将html 和 body 元素的高度设置为100%,使其充满整个屏幕。

HTML代码:

1
2
3
4
5
<div class="container">
<header>HEADER</header>
<div class="main">MAIN</div>
<footer>FOOTER</footer>
</div>

CSS代码:
我们需要调整各个区域占用的页面空间,我们将通过flex 属性来达到这一目的,该属性实际包含了三个属性,分别是:
(1)flex-grow:元素在同一容器中对可分配空间的分配比率,及扩展比率;
(2)flex-shrink:如果空间不足,元素的收缩比率;
(3)flex-basis:元素的伸缩基准值;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.container{
display: flex;
flex-direction: column;
height: 100%;
}
header{
background: #999;
flex: 0 0 auto;
}
.main{
background: orange;
flex: 1 0 auto;
}
footer{
background: #333;
flex: 0 0 auto;
}
 评论