css页脚怎么这只,纯css实现内容不足时页脚在底部

当页面的内容较少时，你会发现页脚并没有在页面的底部。那么如何在内容不足时让页面始终在底部呢？你可能会说用fixed定位，只要设置bottom:0就会在底部了，那么此时当页面内容增多出现滚动条的时候，页脚就始终固定在底部不动。而我们想要的结果是当页面内容增多时，页脚会被压下去随着页面往下滚动。那么用纯css如何实现呢？

一、html代码

二、css代码

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

html,

body {

height: 100%;

}

#page {

min-height: 100%;

position: relative;

padding-bottom: 80px;

}

.header{

height: 50px;

background-color: dodgerblue;

}

.footer {

height: 50px;

background-color: #19212a;

position: absolute;

bottom: 0;

width: 100%;

}

三、效果图

其中蓝色为页头，黑色的为页脚。只需几行css代码便实现了内容不足时页脚距底。