页脚组件位置

Question

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

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

Answer 1

问题来自position: fixed;。

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

CSS : Position property

Answer 2

.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>

页脚组件位置

Footer component position

html

css

components

positioning