Question

我在我的CSS中添加了代码，因此当页面上有内容时，我的背景会停止拉伸。但是现在我的内容被切断了，我认为是因为页脚没有停留在页面的底部。如果页面加载有点慢，则可见，但是一旦内容加载，您就再也看不到页脚了。你也不能在不改变高度的情况下向下滚动。我已经尝试了插件，并在其他帖子上建议了其他代码。没有人帮忙。有没有办法让我的页脚保持在底部，同时保持代码不让我的背景拉伸？编辑我很抱歉遗漏了用于停止拉伸的代码。它可以在下面看到。此外，可以看到正在发生的事情的一个例子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

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

我希望页脚位于内容底部的方式。所以一个固定的页脚不是我需要的，但我发现一个推脚会做的伎俩。显然，当页面上的内容不是很多时，页脚有时会推到内容停止的位置。因此，我的下一步是找出究竟是什么让切断了。

在布局中间切断的容器。 make后台停止拉伸的代码中的#primary是错误的选择器，因此我将其更改为body。我还添加了一个代码，使容器的高度和宽度100％。然后BOOM工作了。下面是我用来修复问题的所有附加css。谢谢所有帮助过我的人。

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


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

内容截止/页脚未停留在底部

2 个答案: