search

l-hammer / You-need-to-know-css

💄CSS tricks for web developers~
https://lhammer.cn/You-need-to-know-css/
Other
5.31k stars 610 forks source link

绝对底部 #33

Open l-hammer opened 6 years ago

l-hammer commented 6 years ago

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

Description

zjhch123 commented 6 years ago

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

l-hammer commented 6 years ago

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

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

lcl-101 commented 3 years ago

我有个方案,兼容性可以到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