Question

所以我将html和body元素CSS设置为height: 100%，当我的页面元素占据屏幕高度的100％以上时，正如预期的滚动条出现，这样我就可以向下滚动以查看达到100％限制的元素，但是在这种情况下背景会减少。 Code I mentoined：

修改：即使我从这两个元素中删除height: 100%规则，问题仍会出现。

html
  //height: 100%
  body
    //height: 100%

以下是截图：

我该如何解决这个问题？我希望我的背景不仅仅是整页的100％。

修改这几乎是我在这个页面上的所有CSS：

.animated-gradient
  background: linear-gradient(0deg, #a3f51b, #057fd2, #d205b8)
  background-size: 600% 600%
  -webkit-animation: animated-gradient 30s ease infinite
  -moz-animation: animated-gradient 30s ease infinite
  animation: animated-gradient 50s ease infinite

*
  margin: 0
  padding: 0
  box-sizing: border-box

html
  min-height: 100%
  body
    min-height: 100%
    font-size: 17px
    background-attachment: fixed

#main-menu
  position: relative

.main-menu-item
  cursor: pointer
  +bs1()
  background: $white
  transition: all .25s
  //&:hover
    +scale(1.05, 1.05)
  &:active
    +scale(0.95,0.95)
  i, span
    display: block

.box-size-11
  width: 9.5vw
  height: 9.5vw
  margin: .25vw
  float: left
  vertical-align: top
  i, span
    font-size: 5vw
    text-align: center
  span
    font-size: 1vw

.box-size-21
  @extend .box-size-11
  width: 9.5vw * 2 + 0.5vw

HTML结构

<body> <!-- body is the element with background and its one that gets cut down -->
  <div>
    <div></div>
    <div></div>
    <div></div>
    ...
  </div>
</body>

Answer 1

尝试在背景上使用固定定位。默认情况下，您使用的背景（而不是重复/实体，否定问题）将定位为绝对背景。所以高度可以达到100％，但背景仍保持在同一位置。

这可以通过在css对象的末尾添加以下内容来完成：

background-attachment: fixed;

编辑：

创建一个额外的div来容纳渐变。使用BODY限制固定定位的使用。因此，在您的情况下，您可以简单地将.animated-gradient移动到没有子节点的div，并使用固定定位。

Answer 2

不确定这是否会产生你想要的东西这就是我的工作。在页面顶部创建一个容器（我使用了DIV）（我将它直接放在body标签之后），一个空容器...我在下面粘贴的代码应用了内联样式，但你可以拉如果你愿意，可以将样式输出并放入CSS中。

<div style="
  background: linear-gradient(0deg, #a3f51b, #057fd2, #d205b8);
  animation: animated-gradient 50s ease infinite;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position:fixed;">
</div>

绝对定位按预期工作，但背景不会随用户滚动，因此我们添加固定位置，以使背景跟随用户滚动浏览网页。您可能需要添加一个Z-index并使用数字来愚弄，以确保您的新背景不会覆盖您的任何内容...我添加了一个z-index：-10将其置于我的内容之后...享受！ :)

当身体为100％且元素高度超过100％时，背景会被切断

2 个答案: