页脚组件位置[重复]答案

【问题标题】：Footer component position [duplicate]页脚组件位置[重复]
【发布时间】：2018-08-30 21:17:13
【问题描述】：

我在使用页脚 css 时遇到了一些困难。我希望它留在页面底部。在滚动到页面底部之前，我不希望它可见。

.footer{
    position: fixed;
    display: block;
    width: 100%;
    height: 80px;
    bottom: 0;
    float: none;
}

【问题讨论】：

尝试使用absolute 而不是fixed。
区别在于fixed总是相对于视口，而absolute是相对于第一个relative父级。
@Phiter 我已经尝试了每一个定位，当我向下滚动时，它要么“粘”到底部，要么浮动在页面中间。
你能把它放在codepen上供我们测试吗？
顺便说一句，如果你希望它是绝对的并且总是在页面底部，你必须设置body { min-height: 100vh; }

标签： html css components positioning

【解决方案1】：

.footer {
    position: absolute;
    display: block;
    width: 100%;
    height: 0;
    bottom: 0;
    float: none;
    transition: height 1s ease-in-out;
}
.footer.active {
    height: 80px;
}

<script type="text/javascript">
    window.onscroll = function(ev) {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            $(".footer").addClass('active');
        } else {
            $(".footer").removeClass('active');
        }
    };
</script>

<div class="footer">
    ...
</div>

【讨论】：

【解决方案2】：

问题来自position: fixed;。

“固定”表示它固定在视口上。所以尝试删除position: fixed;

CSS : Position property

【讨论】：

这个article 也可能有用。
问题是，万一网页在最后一个组件之后有空白区域，我的页脚在最后一个组件之后只是漂浮在空中。