CSS3渐变背景在底部出现不必要的白色空间

Question

我在应用CSS3渐变时遇到了一个麻烦，当内容高度不足以滚动时，无法去除底部的空白。比如这里：http://womancareolympia.webs.com/。我已经尝试将html和body的高度设置为100%或auto，这样可以让渐变延伸到底部，但当内容需要滚动条时，内容会超出渐变范围。谢谢帮助！

- Jedediah Shumaker

Answer 1

• 在 body 中添加 min-height: 100%。
• 从 body 中删除所有的 padding-top（或将其设置为 0）。
• 在 #fw-container 上设置 top: 129px。
• 在 #fw-container 上设置 margin-bottom: 110px。
• 在 #fw-foottext 中添加 overflow: hidden。

（仅在 Chrome 和 Firefox 中测试通过）

我认为您应该重新设计CSS，不要到处使用像 top: 100px 和 margin-top: -50px 这样的东西。这没有任何理由。

- thirtydot

---

已解决！非常感谢，我在各处都遇到了这个问题！ - Jedediah Shumaker

我应该使用padding代替margin或top / left吗？我被迫使用模板和一些构建器实用程序，我唯一能做的就是添加自己的CSS。我无法编辑现有的CSS或HTML。 - Jedediah Shumaker

那么，在这种情况下，也许这并不是一个坏的解决方案。我可以想象不能改变HTML或编辑现有CSS会非常瘫痪。你所拥有的功能很好，只是有点不够优雅。 - thirtydot

Answer 2

我曾经遇到过同样的问题。可以通过在body元素中添加以下属性来解决这个问题（其中定义了线性渐变）

 body {
    background-image: linear-gradient(
        to right bottom, 
        var(--clr-primary-100) 0%,  // Random colors
        var(--clr-primary-900) 100%
    ); // Linear gradient
    background-size: cover;      // Add these properties to your body tag
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

希望这对你有所帮助。如果遇到任何问题，请告诉我。

- Adarsh_V_Desai