android html footer 固定,footer保持在页面底部的两种方法

方法一：footer高度固定+绝对定位

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

html代码

HEADER

MAIN

FOOTER

css代码

*{

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;

}

方法二：采用 flexbox布局模型

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

css代码

*{

margin: 0;

padding: 0;

}

html,body{

height: 100%;

}

#container{

display: flex;

flex-direction: column;

height: 100%;

}

header{

background: #999;

flex: 0 0 60px;

}

.main{

background: orange;

flex: 1 0 auto;

}

footer{

background: #333;

flex: 0 0 60px;

}