Css 当主体为100%且元素进入高度超过100%时，背景会被切割_Css

Css 当主体为100%且元素进入高度超过100%时，背景会被切割

css

Css 当主体为100%且元素进入高度超过100%时，背景会被切割,css,Css,因此，我将html和body元素CSS设置为高度：100%，当页面上的元素占据屏幕高度的100%以上时，会出现预期的滚动条，允许我向下滚动查看达到100%限制的元素，但在这种情况下，背景会被削减。代码I注释：编辑：即使我从两个元素中删除height:100%规则，问题仍然会出现 html //height: 100% body //height: 100% 以下是截图：我该如何解决这个问题？我希望我的背景是在整个页面上，而不仅仅是第一个100%的页面编辑：以下是我在

因此，我将

html

和

body

元素CSS设置为

高度：100%

，当页面上的元素占据屏幕高度的100%以上时，会出现预期的滚动条，允许我向下滚动查看达到100%限制的元素，但在这种情况下，背景会被削减。代码I注释：

编辑：即使我从两个元素中删除

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>

...

尝试在背景上使用固定定位。默认情况下，背景（例如您使用的背景）（与否定问题的重复/实体相反）将处于绝对位置。因此，高度缩放到100%，但背景保持在相同的位置

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

background-attachment: fixed;

编辑：

创建一个附加的div以容纳渐变。使用主体限制了固定定位的使用。因此，在您的情况下，您可以简单地将.animated gradient移动到它自己的div（没有子对象），并使用固定定位。

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

background-attachment: fixed;

编辑：

创建一个附加的div以容纳渐变。使用主体限制了固定定位的使用。所以，在你的情况下，你可以简单地移动。动画渐变到它自己的div，没有子对象，并使用固定的定位。

不确定这是否会产生你想要的结果。这里是我要做的工作。在页面顶部创建一个容器（我用了一个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索引，并在数字上游手好闲，以确保你的新背景不会覆盖你的任何内容。。。我添加了一个z-index:-10以将其放在我的内容后面。。。享受！：）

我不确定这是否会产生你想要的结果。这里是我要做的。在页面顶部创建一个容器（我用了一个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>

将

height

更改为

minheight

是否可以解决此问题？@Garconis no。即使我删除这两个属性，问题也会出现。我记得很久以前在我建立的一个网站上遇到过类似的问题，但我不记得我是如何解决的。删除CSS的第77行，你就可以开始了@罗布，那应该是个玩笑吗？因为我没有提供足够的CSS信息而讽刺？如果是这样的话，我会提供更多的代码。你没有提供任何CSS或HTML，所以我认为我的猜测和其他人一样好。将

height

更改为

minheight

可以解决问题吗？@Garconis nope。即使我删除这两个属性，问题也会出现。我记得很久以前在我建立的一个网站上遇到过类似的问题，但我不记得我是如何解决的。删除CSS的第77行，你就可以开始了@罗布，那应该是个玩笑吗？因为我没有提供足够的CSS信息而讽刺？如果是这样，我会提供更多的代码。你没有提供任何CSS或HTML，所以我认为我的猜测和其他人一样好。我将此规则添加到body元素（有背景的元素）中，但它对我不起作用。我还将其添加到具有背景和相同结果的类中。是否将其添加到背景属性之后的动画渐变中？我环顾四周，发现了相同的问题和解决方案。您必须继承阻止代码工作的内容。应该能够在检查员中看到这一点。这不是同一个问题。在我的例子中，元素被删减（检查屏幕截图2），而不是背景本身。所以：html body gradient/gradient/body/html与设置body元素的样式相反。我将此规则添加到body元素（带有背景的元素）中，但它对我不起作用。我还将其添加到具有背景和相同结果的类中。是否将其添加到背景属性之后的动画渐变中？我环顾四周，发现了相同的问题和解决方案。您必须继承阻止代码工作的内容。应该能够在检查员中看到这一点。这不是同一个问题。在我的例子中，元素被删减（检查屏幕截图2），而不是背景本身。所以：html body gradient/gradient/body/html，而不是设计body元素的样式。是的，这解决了问题，但你只是晚了几分钟，上面的回答中提到了同样的解决方案。啊，该死！哦，好吧，重要的是你的问题解决了！：）是的，这解决了问题，但你是