底部带有多余白色的CSS3渐变背景

zz2j4svz  于 2022-12-20  发布在  CSS3
关注(0)|答案(2)|浏览(220)

我有一个很大的困难,摆脱空白在底部时,我应用了一个CSS3梯度和内容有足够的高度滚动条。
比如这里:http://womancareolympia.webs.com/
我试过将html和body高度都设置为100%或自动,我可以用这种方式使渐变到底部,但当内容需要滚动条时,内容就会流过渐变。
谢谢你的帮助!

zwghvu4y

zwghvu4y1#

  • min-height: 100%body相加。
  • body中删除padding-top的所有示例(或将其设置为0)。
  • #fw-container上设置top: 129px
  • #fw-container上设置margin-bottom: 110px
  • overflow: hidden#fw-foottext相加。
  • (仅在Chrome+Firefox中测试)*

我确实认为你应该重新设计你的CSS**,不要到处使用像top: 100pxmargin-top: -50px这样的东西。

wnavrhmk

wnavrhmk2#

我也遇到了同样的问题。这可以通过在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;
}

希望这能帮上忙。如果你遇到什么问题就告诉我。

相关问题