为什么我的网页底部是蓝色背景而不是渐变？

Question

嗨，我正在制作一个网络应用程序，并且现在使用渐变作为背景。我想知道为什么我的屏幕底部无缘无故地出现蓝色背景。这是代码和屏幕截图。

codepen：https://codepen.io/AviPlayz247/pen/QWomyLe

正如您在codepen中看到的那样，底部有一个蓝色背景，而不是渐变连续。有谁知道为什么吗？

我尝试过的一些修复包括设置 body

min-height: 100%

和 html 标签，但它根本没有真正修复任何问题。如果有人可以帮助我解决我遇到的这个问题，那就太好了！谢谢！

Answer 1

这是一个简单的示例，其中有一个 100% 高的元素，无论大小如何，即使内容需要滚动，其渐变也完全覆盖它。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.example1 {
  color: #fff;
  background: linear-gradient(
    180deg,
    rgb(23.75, 0, 91.36) 0%,
    rgb(9.84, 3, 29.31) 100%
  );
  height: 100%;
  overflow: auto;
}

<div class="example1">

  <h1>Scrollable Area with Gradient</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, vulputate non urna quis, lobortis feugiat mauris. Nunc sit amet ligula commodo, posuere ligula eget, ullamcorper magna. Duis scelerisque fringilla iaculis. Nullam nunc arcu, porta sit amet iaculis egestas, condimentum ac massa. Morbi euismod condimentum lectus, ac mattis lorem rhoncus eu. Etiam sed lacinia ante. Pellentesque imperdiet tristique scelerisque. Sed non mauris fringilla, faucibus turpis vel, varius sapien. Cras efficitur, lectus sit amet pellentesque rhoncus, ipsum nunc mollis justo, eu placerat leo ex sit amet ante. Donec dictum feugiat massa et aliquet.</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sem dolor, tempor ac enim non, lobortis blandit odio. Suspendisse gravida sem sit amet molestie ultrices. Aenean fermentum dui vel aliquam lacinia. Donec eget ante sed enim mattis dictum consectetur vitae ex. Donec imperdiet accumsan pellentesque. Suspendisse viverra facilisis arcu, in viverra metus posuere non. Nam sagittis orci a sapien euismod, vel sagittis arcu elementum. Morbi convallis bibendum elit, nec sodales leo lacinia eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien et felis faucibus, vitae luctus ligula posuere. Nulla condimentum porta lacus, id elementum dolor placerat non. Ut risus tortor, accumsan quis faucibus in, tincidunt et risus. Nulla eu augue ut arcu tempor varius in vitae turpis. Mauris orci lorem, efficitur eget pellentesque ac, scelerisque at mi.</p>

  <p>Vivamus pellentesque tristique neque, vitae suscipit enim egestas vitae. Pellentesque tempus massa in ligula semper, ac pretium ante interdum. Aenean nec tortor eu lacus tempus commodo. Maecenas convallis euismod rutrum. Donec quis enim tortor. Aliquam blandit bibendum diam. Maecenas nec turpis ut nisi imperdiet fermentum. Vivamus dapibus est at tortor faucibus, in maximus libero venenatis. Nulla viverra nibh sit amet turpis auctor molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

  <p>In at rhoncus risus, nec tincidunt magna. Pellentesque tellus urna, dapibus non dictum ac, lacinia ullamcorper sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ornare aliquet tortor vitae egestas. Phasellus tellus nibh, tincidunt vel sem sit amet, tristique elementum diam. Phasellus quis purus sit amet nisi porta imperdiet. Suspendisse hendrerit orci eget ipsum bibendum, eleifend suscipit purus fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent eget neque in massa fermentum cursus et at est. Vivamus consectetur, diam et bibendum tristique, sem tellus placerat turpis, ac consequat metus sapien at magna. Nulla vitae ullamcorper sapien, vel gravida libero. Nulla lacinia risus non arcu lacinia malesuada. Morbi tincidunt sapien non mauris accumsan cursus.</p>

  <p>Duis sodales ac velit in laoreet. Fusce quis arcu vitae nulla euismod aliquam. Nulla bibendum id justo vitae consequat. Quisque ultrices quam quis orci pellentesque porttitor. Vestibulum nec feugiat eros, sit amet luctus sem. Phasellus a nunc est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis in nisl mauris. Nullam mattis sem at dui dictum, non suscipit est pretium. Nullam ac facilisis velit. Maecenas interdum justo justo, et aliquet dui feugiat ut.</p>
  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, vulputate non urna quis, lobortis feugiat mauris. Nunc sit amet ligula commodo, posuere ligula eget, ullamcorper magna. Duis scelerisque fringilla iaculis. Nullam nunc arcu, porta sit amet iaculis egestas, condimentum ac massa. Morbi euismod condimentum lectus, ac mattis lorem rhoncus eu. Etiam sed lacinia ante. Pellentesque imperdiet tristique scelerisque. Sed non mauris fringilla, faucibus turpis vel, varius sapien. Cras efficitur, lectus sit amet pellentesque rhoncus, ipsum nunc mollis justo, eu placerat leo ex sit amet ante. Donec dictum feugiat massa et aliquet.</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sem dolor, tempor ac enim non, lobortis blandit odio. Suspendisse gravida sem sit amet molestie ultrices. Aenean fermentum dui vel aliquam lacinia. Donec eget ante sed enim mattis dictum consectetur vitae ex. Donec imperdiet accumsan pellentesque. Suspendisse viverra facilisis arcu, in viverra metus posuere non. Nam sagittis orci a sapien euismod, vel sagittis arcu elementum. Morbi convallis bibendum elit, nec sodales leo lacinia eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien et felis faucibus, vitae luctus ligula posuere. Nulla condimentum porta lacus, id elementum dolor placerat non. Ut risus tortor, accumsan quis faucibus in, tincidunt et risus. Nulla eu augue ut arcu tempor varius in vitae turpis. Mauris orci lorem, efficitur eget pellentesque ac, scelerisque at mi.</p>

  <p>Vivamus pellentesque tristique neque, vitae suscipit enim egestas vitae. Pellentesque tempus massa in ligula semper, ac pretium ante interdum. Aenean nec tortor eu lacus tempus commodo. Maecenas convallis euismod rutrum. Donec quis enim tortor. Aliquam blandit bibendum diam. Maecenas nec turpis ut nisi imperdiet fermentum. Vivamus dapibus est at tortor faucibus, in maximus libero venenatis. Nulla viverra nibh sit amet turpis auctor molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

  <p>In at rhoncus risus, nec tincidunt magna. Pellentesque tellus urna, dapibus non dictum ac, lacinia ullamcorper sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ornare aliquet tortor vitae egestas. Phasellus tellus nibh, tincidunt vel sem sit amet, tristique elementum diam. Phasellus quis purus sit amet nisi porta imperdiet. Suspendisse hendrerit orci eget ipsum bibendum, eleifend suscipit purus fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent eget neque in massa fermentum cursus et at est. Vivamus consectetur, diam et bibendum tristique, sem tellus placerat turpis, ac consequat metus sapien at magna. Nulla vitae ullamcorper sapien, vel gravida libero. Nulla lacinia risus non arcu lacinia malesuada. Morbi tincidunt sapien non mauris accumsan cursus.</p>

  <p>Duis sodales ac velit in laoreet. Fusce quis arcu vitae nulla euismod aliquam. Nulla bibendum id justo vitae consequat. Quisque ultrices quam quis orci pellentesque porttitor. Vestibulum nec feugiat eros, sit amet luctus sem. Phasellus a nunc est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis in nisl mauris. Nullam mattis sem at dui dictum, non suscipit est pretium. Nullam ac facilisis velit. Maecenas interdum justo justo, et aliquet dui feugiat ut.</p>
  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, vulputate non urna quis, lobortis feugiat mauris. Nunc sit amet ligula commodo, posuere ligula eget, ullamcorper magna. Duis scelerisque fringilla iaculis. Nullam nunc arcu, porta sit amet iaculis egestas, condimentum ac massa. Morbi euismod condimentum lectus, ac mattis lorem rhoncus eu. Etiam sed lacinia ante. Pellentesque imperdiet tristique scelerisque. Sed non mauris fringilla, faucibus turpis vel, varius sapien. Cras efficitur, lectus sit amet pellentesque rhoncus, ipsum nunc mollis justo, eu placerat leo ex sit amet ante. Donec dictum feugiat massa et aliquet.</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sem dolor, tempor ac enim non, lobortis blandit odio. Suspendisse gravida sem sit amet molestie ultrices. Aenean fermentum dui vel aliquam lacinia. Donec eget ante sed enim mattis dictum consectetur vitae ex. Donec imperdiet accumsan pellentesque. Suspendisse viverra facilisis arcu, in viverra metus posuere non. Nam sagittis orci a sapien euismod, vel sagittis arcu elementum. Morbi convallis bibendum elit, nec sodales leo lacinia eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien et felis faucibus, vitae luctus ligula posuere. Nulla condimentum porta lacus, id elementum dolor placerat non. Ut risus tortor, accumsan quis faucibus in, tincidunt et risus. Nulla eu augue ut arcu tempor varius in vitae turpis. Mauris orci lorem, efficitur eget pellentesque ac, scelerisque at mi.</p>

  <p>Vivamus pellentesque tristique neque, vitae suscipit enim egestas vitae. Pellentesque tempus massa in ligula semper, ac pretium ante interdum. Aenean nec tortor eu lacus tempus commodo. Maecenas convallis euismod rutrum. Donec quis enim tortor. Aliquam blandit bibendum diam. Maecenas nec turpis ut nisi imperdiet fermentum. Vivamus dapibus est at tortor faucibus, in maximus libero venenatis. Nulla viverra nibh sit amet turpis auctor molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

  <p>In at rhoncus risus, nec tincidunt magna. Pellentesque tellus urna, dapibus non dictum ac, lacinia ullamcorper sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ornare aliquet tortor vitae egestas. Phasellus tellus nibh, tincidunt vel sem sit amet, tristique elementum diam. Phasellus quis purus sit amet nisi porta imperdiet. Suspendisse hendrerit orci eget ipsum bibendum, eleifend suscipit purus fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent eget neque in massa fermentum cursus et at est. Vivamus consectetur, diam et bibendum tristique, sem tellus placerat turpis, ac consequat metus sapien at magna. Nulla vitae ullamcorper sapien, vel gravida libero. Nulla lacinia risus non arcu lacinia malesuada. Morbi tincidunt sapien non mauris accumsan cursus.</p>

  <p>Duis sodales ac velit in laoreet. Fusce quis arcu vitae nulla euismod aliquam. Nulla bibendum id justo vitae consequat. Quisque ultrices quam quis orci pellentesque porttitor. Vestibulum nec feugiat eros, sit amet luctus sem. Phasellus a nunc est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis in nisl mauris. Nullam mattis sem at dui dictum, non suscipit est pretium. Nullam ac facilisis velit. Maecenas interdum justo justo, et aliquet dui feugiat ut.</p>

</div>