页脚组件位置[重复]

Posted 2023-02-23

【中文标题】页脚组件位置[重复]

【英文标题】：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;

【参考方案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 也可能有用。

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