html底部文件最下面,Sticky Footer 粘性底部-让底部一直在页面最下面

具体实例页面请看github

方法一：footer绝对定位-并加一层父元素

Title

*{

margin:0;

padding:0;

box-sizing: border-box;

}

html,body{

height: 100%;

/*min-height: 100%;*/

min-width: 1200px;

}

body{

font: 14px/1.5 "Microsoft YaHei", sans-serif;

color: #666666;

background: #e8e8e8;

}

.body{

position: relative;

min-height: 100%;

height:auto !important;

height:100%;//IE6不识别min-height

}

.header{

width: 100%;

background-color: #f1a899;

height: 64px;

box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0 transparent;

}

.section{

width: 1200px;

margin: 0 auto;

padding: 30px 0 145px;

}

.container{

background: #ffffff;

height:500px;

}

.footer{

position: absolute;

bottom: 0;

height: 95px;

width: 100%;

background: #858B9A;

}

header页面头部

页面主体内容

footer页面底部

方法二：foote绝对定位-以body为父元素

Title

*{

margin:0;

padding:0;

box-sizing: border-box;

}

html{

height: 100%;

min-height: 100%;

min-width: 1200px;

}

body{

position: relative;

font: 14px/1.5 "Microsoft YaHei", sans-serif;

color: #666666;

background: #e8e8e8;

min-height:100%;

}

.header{

width: 100%;

background-color: #f1a899;

height: 64px;

box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0 transparent;

}

.section{

width: 1200px;

margin: 0 auto;

padding: 40px 0 140px;

}

.container{

background: #ffffff;

height:500px;

}

.footer{

position: absolute;

bottom: 0;

height: 95px;

width: 100%;

background: #858B9A;

}

header页面头部

页面主体内容

footer页面底部

方法三：footer加负值上边距

Title

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html, body {

height: 100%;

min-height: 100%;

min-width: 1200px;

}

body {

font: 14px/1.5 "Microsoft YaHei", sans-serif;

color: #666666;

background: #e8e8e8;

}

.header {

width: 100%;

background-color: #f1a899;

height: 64px;

box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0 transparent;

}

.section {

min-height: 100%;

padding: 0 0 95px;

}

.container {

width: 1200px;

height: 500px;

margin: 30px auto;

background: #ffffff;

}

.footer {

height: 95px;

margin-top: -95px;

width: 100%;

background: #858B9A;

}

header页面头部

页面主体内容

footer页面底部

方法四：给section的高度用calc(100vh-footer.height)

calc()：是css3新增方法，pc端大部分支持ie9+，移动端大部分不支持

vh单位：相对于视窗的高度，视窗的高度是100vh

方法四用calc()函数算出高度，内容较少，小屏幕下如果出现横向滚动条，会影响纵向滚动条

Title

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html, body {

height: 100%;

/*min-height: 100%;*/

min-width: 1200px;

}

body {

font: 14px/1.5 "Microsoft YaHei", sans-serif;

color: #666666;

background: #e8e8e8;

}

.header {

width: 100%;

background-color: #f1a899;

height: 64px;

box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0 transparent;

}

.section {

min-height: calc(100vh - 95px);

}

.container {

width: 1200px;

height: 500px;

margin: 0 auto;

background: #ffffff;

}

.footer {

height: 95px;

width: 100%;

background: #858B9A;

}

header页面头部

页面主体内容

footer页面底部

方法五：用flexbox

flexbox对ie支持不太好

Title

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

height: 100%;

min-width: 1200px;

}

body {

font: 14px/1.5 "Microsoft YaHei", sans-serif;

color: #666666;

background: #e8e8e8;

min-height: 100%;

display: flex;

flex-direction: column;

}

.header {

width: 100%;

background-color: #f1a899;

height: 64px;

box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0 transparent;

}

.section {

flex:1;

padding:30px 0;

}

.container {

width: 1200px;

height: 1000px;

margin: 0 auto;

background: #ffffff;

}

.footer {

height: 95px;

width: 100%;

background: #858B9A;

}

header页面头部

页面主体内容

footer页面底部