Question

所以我一直试图让我的页脚始终位于页面底部，而不使用＆＃34; position：absolute＆＃34;因为它在屏幕变小时重叠页面的内容。我也不想使用＆＃34; position：fixed＆＃34;因为我不希望页脚始终可见。当我使用＆＃34; position：relative＆＃34;它在页脚下方创建了一个空白区域，我无法删除它。如果你能帮助我，我将非常感激。我目前正在为我的项目使用Bootstrap 4。这是我的代码：

<div class="container">
(some content)
</div>
<footer>
(some content)
</footer>

CSS

footer {
    position: relative;
    bottom: 0;
    width: 100%;
    background-color: grey;
    text-align: center;
}

提前致谢。

Answer 1

使用固定位置而不是绝对位置固定页脚始终位于页面底部。然后是0，那么它总是在底部。如果页脚有任何重叠，那么你可以将z-index设置为100或更高，这样就不会与页脚重叠。

Answer 2

在js中比较document.scrollingElement.scrollHeight和window.innerHeight。

如果它们相等则表示您的内容在高度方面小于视口，并且您可以在底部使用绝对位置作为页脚，因为它不会覆盖您的实际内容。

如果document.scrollingElement.scrollHeight大于window.innerHeight那么这意味着你的内容比视口大，所以不用担心你可以在不使用位置属性的情况下将页脚放在底部。

如果窗口大小调整是您的问题（调整大小可能会更改文档的高度），那么您可以在窗口上使用resize事件侦听器。在那里你可以调用一个函数来完成上面提到的步骤。

将页脚推到页面底部而不使用＆＃34; positition：absolute;底部：0＆＃34;

2 个答案: