绝对底部

[l-hammer]

https://l-hammer.github.io/You-need-to-know-css/#/sticky-footer

Description

[zjhch123]

我觉得这个例子举的不好。
正常的主视区域(main)，一般都不会定高吧，我觉得应该是会随着内部元素的变动而高度发生变化的。
所以这类布局我还是喜欢稍微配合一点js实现吧…

[l-hammer]

@zjhch123
我觉得这个例子举的不好。
正常的主视区域(main)，一般都不会定高吧，我觉得应该是会随着内部元素的变动而高度发生变化的。
所以这类布局我还是喜欢稍微配合一点js实现吧…

你可能理解错了，你应该将section当做主视区域，而不是main，后者的定高只是为了示例在文档中的显示效果~

[lcl-101]

我有个方案,兼容性可以到ie6,我们线上项目都在用

<div class="body_box">
    <div class="main">main</div>
</div>
<div class="footer">footer</div>

.body_box {
    position: relative;
    min-height: 100%;
    width: 100%;
    overflow: hidden;
}
.footer {
    position: relative;
    margin-top: -31px;
    width: 100%;
    text-align: center;
    height: 30px;
    border-top: 1px solid #e5e5e5;
    color: #666;
    z-index: 10;
    overflow: hidden;
}

可以点开这个链接地址看
demo