内容被切断/页脚不停留在底部

Question

我在我的 CSS 中添加了代码，这样当页面上有内容时，我的背景就会停止拉伸。但是现在我的内容被切断了，我认为这是因为页脚没有留在页面底部。如果页面加载有点慢，它是可见的，但是一旦内容加载，您就看不到页脚了。你也不能在不改变高度的情况下向下滚动。我已经尝试过插件，以及其他帖子中建议的附加代码。没有人有帮助。有没有一种方法可以让我的页脚保持在底部，同时保持让我的背景不会拉伸的代码？ edit 很抱歉遗漏了用于停止拉伸的代码。可以在下面看到。此外，可以看到正在发生的事情的示例here.

#primary
{
position: absolute;
left: 0;
height: 100%;
background-size: cover;
background-attachment: fixed;
}

This is a screenshot of the original issue.。我的内容（播放器）可以完全看到，但背景被拉伸了。通过添加position: absolute;我得到了正确加载的背景，但现在内容被切断了。结果截图可见here for my mobile device和Here for my desktop. 如你所见，播放器在移动端切断，并且两者都不显示页脚。起初我以为页脚正在加载。更改top 的值后，我可以看到似乎在内容后面的页脚。我把它改成了top: 370，得到了this for on my mobile，and this on my desktop.。页脚中的社交图标在那里，但它加载在内容后面，并且在页面中间。看来这就是我的内容被切断的原因。

Answer 1

我不确定我是否完全理解您的问题...但我认为您的 CSS 的问题是 height: 100%;。添加 100% 高度使其成为屏幕的 100% 高度 - 因为它不是从页面顶部开始，它向下延伸到可见区域底部下方。如果你添加 CSS top: 0; 那么你就会明白我的意思——它不再低于屏幕底部，但它现在与标题重叠。为了解决这个问题，您可以将 CSS 更改为：

position: absolute;
left: 0;
height: calc(100% - 54px); /*Minus the height of the header*/
top: 54px; /*The height of the header*/
background-size: cover;
background-attachment: fixed;

我希望这会有所帮助，如果没有，请更详细地解释问题，我会看看是否可以提供帮助！

Answer 2

经过几天的故障排除和网络搜索，我找到了解决问题的方法。我添加了将页脚放在页面底部的代码。该代码使页脚保持不变，而不是在所有内容的底部。它也没有改变我的内容的切断。所以我知道它不是页脚。

我希望页脚位于内容底部的方式。所以固定页脚不是我需要的，但我发现推动页脚可以解决问题。显然，当页面上的内容不多时，有时页脚会向上推到内容停止的地方。所以我的下一步是找出到底是什么阻止了争论。

它是在布局中间被切断的容器。 #primary 在代码中使背景停止拉伸是错误的选择器，所以我将其更改为body。我还添加了一个代码来使容器的高度和宽度为 100%。然后 BOOM 成功了。以下是我用来解决问题的所有其他 css。感谢所有帮助过我的人。

body {
width:100%;
height:100%;}


body {   
position: absolute;
background-size: cover;
background-attachment: fixed;}