android html footer 固定,前端小技巧之footer固定

想滚的footer

html:

css:

html, body { height: 100%; //关键1}

.main-container { min-height: 100%; //关键2 position: relative;}

.main-content { height: 1200px; padding-bottom: 70px; //关键3}

footer {

height: 70px;

background-color: #4d4d4d;

width: 100%;

position: absolute; //关键4

bottom: 0;

}

效果：

Paste_Image.png

关键1：一定要设置html和body的高度为100%，保证内容不足的时候撑开页面，保证footer在底部。

关键2：不要设置根div的class为container。因为container包含了很多html原生的样式，需要自己做调整。并且一定要设置根div的最小高度为100%，原因和关键1一样。

关键3：一定要设置主内容的padding-bottom为footer的高度，避免在页面最底部出现footer遮盖主内容的现象。

关键4：设置footer相对于父div为绝对位置。