HTML 页面无法向下滚动并且内容隐藏在页脚后面

时间:2021-06-22 19:12:00

标签: html css

所以我无法在我的 html 页面上向下滚动。我已经想到了一些可能导致这种情况的事情,但我仍然不知道如何解决它。我有一个粘在侧面底部的页脚,所有内容都在该页脚的后面。有人告诉我只是添加 body {padding-bottom: "height of footer"} 但这对我不起作用,因为如果屏幕分辨率不同,我的页脚会改变高度。

1 个答案:

答案 0 :(得分:0)

我的猜测是您的页脚是绝对位置或固定位置(或类似位置)。这允许您的页脚始终显示,但页面上的其他元素不会意识到这一点(因此隐藏在后面)。

所以你有两个选择:

选项 1:允许页脚始终不显示,以及 使用诸如 css flex 之类的东西,您可以在其中定义元素,以便中间内容具有 flex-grow。 (也可能有一些填充)

选项 2:向主要内容添加某种填充,以便为页脚留出空间。 如果您不能确定页脚的大小,您可以随时对页脚进行一些限制,并根据您的内容设置最大高度。这样,您将始终能够看到所有内容,最坏的情况是您会获得额外的空白。

例如:如果您的页脚可以高达 20vh,您可以将内容的 vh 设置为 120。(您也可以使用填充或边距,无论是否有效)