内容删减off/Footer不留底
Content cut off/Footer not staying at the bottom
我在 css 中添加了代码，这样当页面上有内容时，我的背景就会停止拉伸。但是现在我的内容被截断了，我认为这是因为页脚没有停留在页面底部。如果页面加载速度有点慢，它是可见的，但是一旦内容加载，您就再也看不到页脚了。你也不能在不改变高度的情况下向下滚动。我试过插件，并在其他 post 上推荐了额外的代码。 None 有帮助。有没有一种方法可以让我的页脚保持在底部，同时保留防止我的背景拉伸的代码？ 编辑 很抱歉遗漏了用于停止拉伸的代码。可以在下面看到。此外，可以看到正在发生的事情的示例 here.
#primary
{
position: absolute;
left: 0;
height: 100%;
background-size: cover;
background-attachment: fixed;
}
This is a screenshot of the original issue.. My content (the player) can be seen completely, but the background is stretched. By adding position: absolute;I got the background to load correctly, but now the content is cut off. A screenshot of results can be seen here for my mobile device, and Here for my desktop. As you can see, the player cuts off on mobile, and both don't show the footer. At first I thought the footer was loading. After changing the value of top, I can see the footer which seems to be behind the content. I changed it to top: 370, and I got this for on my mobile, and this on my desktop.。页脚中的社交图标在那里，但它加载在内容后面，在页面中间。看来这就是我的内容被切断的原因。
我不确定我是否完全理解您的问题...但我认为您 CSS 的问题在于 height: 100%;。添加 100% 高度使其成为屏幕的 100% 高度 - 因为它不是从页面顶部开始，所以它向下延伸到可见区域底部以下。如果你添加 CSS top: 0; 那么你就会明白我的意思 - 它不再低于屏幕底部，但是它现在与 header 重叠。要解决此问题，您可以将 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;
我希望这对您有所帮助，如果没有请更详细地解释问题，我会看看是否可以提供帮助！
经过几天的故障排除和网络搜索，我找到了解决问题的办法。我添加了代码以将页脚放在页面底部。该代码使页脚保持不变，而不是在所有内容的底部。它也没有改变我的内容的切断。所以我知道这不是页脚。
我希望页脚位于内容底部的方式。所以固定页脚不是我所需要的，但我发现推式页脚可以解决问题。显然，当页面上的内容不多时，有时页脚会向上推到内容停止的位置。所以我的下一步是找出到底是什么让控制停止了。
它是在布局中间被切断的容器。 #primary 代码中 make background stop stretching 是错误的选择器，所以我将其更改为 body。我还添加了一个代码，使容器的高度和宽度为 100%。然后 BOOM 它起作用了。以下是我用来解决问题的所有额外 css。感谢所有帮助过我的人。
body {
width:100%;
height:100%;}
body {
position: absolute;
background-size: cover;
background-attachment: fixed;}
我在 css 中添加了代码，这样当页面上有内容时，我的背景就会停止拉伸。但是现在我的内容被截断了，我认为这是因为页脚没有停留在页面底部。如果页面加载速度有点慢，它是可见的，但是一旦内容加载，您就再也看不到页脚了。你也不能在不改变高度的情况下向下滚动。我试过插件，并在其他 post 上推荐了额外的代码。 None 有帮助。有没有一种方法可以让我的页脚保持在底部，同时保留防止我的背景拉伸的代码？ 编辑 很抱歉遗漏了用于停止拉伸的代码。可以在下面看到。此外，可以看到正在发生的事情的示例 here.
#primary
{
position: absolute;
left: 0;
height: 100%;
background-size: cover;
background-attachment: fixed;
}
This is a screenshot of the original issue.. My content (the player) can be seen completely, but the background is stretched. By adding position: absolute;I got the background to load correctly, but now the content is cut off. A screenshot of results can be seen here for my mobile device, and Here for my desktop. As you can see, the player cuts off on mobile, and both don't show the footer. At first I thought the footer was loading. After changing the value of top, I can see the footer which seems to be behind the content. I changed it to top: 370, and I got this for on my mobile, and this on my desktop.。页脚中的社交图标在那里，但它加载在内容后面，在页面中间。看来这就是我的内容被切断的原因。
我不确定我是否完全理解您的问题...但我认为您 CSS 的问题在于 height: 100%;。添加 100% 高度使其成为屏幕的 100% 高度 - 因为它不是从页面顶部开始，所以它向下延伸到可见区域底部以下。如果你添加 CSS top: 0; 那么你就会明白我的意思 - 它不再低于屏幕底部，但是它现在与 header 重叠。要解决此问题，您可以将 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;
我希望这对您有所帮助，如果没有请更详细地解释问题，我会看看是否可以提供帮助！
经过几天的故障排除和网络搜索，我找到了解决问题的办法。我添加了代码以将页脚放在页面底部。该代码使页脚保持不变，而不是在所有内容的底部。它也没有改变我的内容的切断。所以我知道这不是页脚。
我希望页脚位于内容底部的方式。所以固定页脚不是我所需要的，但我发现推式页脚可以解决问题。显然，当页面上的内容不多时，有时页脚会向上推到内容停止的位置。所以我的下一步是找出到底是什么让控制停止了。
它是在布局中间被切断的容器。 #primary 代码中 make background stop stretching 是错误的选择器，所以我将其更改为 body。我还添加了一个代码，使容器的高度和宽度为 100%。然后 BOOM 它起作用了。以下是我用来解决问题的所有额外 css。感谢所有帮助过我的人。
body {
width:100%;
height:100%;}
body {
position: absolute;
background-size: cover;
background-attachment: fixed;}