html 页脚永远保持在底部

发表于 | 分类于

当页面内容不足一屏时，页脚就会跑到屏幕中间去，体验效果不好。

解决方法

html

<body>
    <div class="header">
        页首
    </div>

    <div class="content">
        内容
    </div>

    <div class="footer">
        页脚
    </div>
</body>

css

html, body{ 
    height: 100%; 
    margin: 0;
    padding: 0;
}
body{ 
    position: relative;   /* 重要！保证footer是相对于body位置绝对 */  
    height: auto;         /* 保证页面能撑开浏览器高度时显示正常 */  
    min-height: 100% ;
}
.content {
    margin: 0 auto;
    min-height: 100%;
    padding-bottom: 100px; /* 重要！给footer预留的空间 */  
}
.footer {
    position: absolute;
    height: 100px;         /* footer的高度一定要是固定值 */  
    bottom: 0;
    width: 100%;
    clear: both;
}

参考资料