css sticky footer实现,sticky footer 的几种实现方法

方法一：利用padding和margin

利用margin

DOM 结构

content

sticky footer

CSS

html,body{

height:100%;

}

.content{

min-height:100%;

margin-bottom:-100px;

}

.footer,.content:after{

height:100px; /* 防止动态添加html时造成footer被覆盖 */

}

利用padding,会多一层DOM结构

DOM

CSS

.wrap{

box-sizing:border-box;

min-height:100%;

padding-bottom:100px;

}

main{

min-height:100%;

}

footer{

margin-bottom:-100px;

height:100px;

}

方法二： 利用calc() 属性

.content{

height: calc(100% - 100px);

}

方法三： flex

DOM 结构 同上

CSS

html{

height:100%;

}

html body{

min-height:100%;

display:flex;

flex-direction:column;

}

.content{

flex:1;

}

.footer{

height：100px;

flex:none; /*flex 默认值为0 1 auto */

}

方法四：gird

缺点：兼容性不好

body{

display:grid;

grid-template-rows:80px auto 100px;

}

方法五： 绝对定位

DOM结构(随意)

i am content

CSS

html{

min-height:100%;

position:relative;

}

body{

margin-bottom:100px;

}

.footer{

position:absolute;

height:100px;

width:100%;

bottom:0;

}

方法六：table

兼容所有主流浏览器

DOM 结构

CSS

html,body,.wrap{

height:100%;

}

.wrap{

display:table;

}

header,footer,.main{

display:block; /*IE7 and under*/

display:table-row;

}

header,footer{

height:1

}

暂时整理这么多