如何将底部的 CSS 形状推出屏幕？答案

【问题标题】：How to push CSS shape at the bottom out of the screen?如何将底部的 CSS 形状推出屏幕？
【发布时间】：2020-08-31 00:32:49
【问题描述】：

我正在尝试复制这个模型。

我成功地将顶部的圆形形状推出了屏幕，如图所示。但最下面的只是在不离开屏幕的情况下延长网页。如图所示，如何将其推出屏幕？

#circleTop {
    width: 55rem;
    height: 55rem;
    background-image: linear-gradient(120deg, red, yellow);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    left: 60%;
    top: -35rem;
}

#circleBottom {
    width: 50rem;
    height: 50rem;
    background-image: linear-gradient(120deg, green, blue);
    border-radius: 50%;
    position: relative;
    z-index: -1;
    right: 45%;
    bottom: -35rem;
}

<div class="header">
            <div id="circleTop"></div>
            <div class="headerBox">
                <h1>Headline</h1>
                <h2>Subheading</h2>
            </div>
        </div>
 ....

<div class="footer">
           <div id="circleBottom"></div>
            <div class="section">
                <a href="#">Link</a>
                <a href="#">Link</a>
            </div>
            <div class="otherLinks">
                <p>Lorem Ipsum Dolor Sit Amet</p>
            </div>
        </div>

【问题讨论】：

你试过使用 position: absolute 吗？
我认为您可能希望将问题重新定义为：如何防止我的主窗口扩展以填充所有内容？答案是：限制主窗口的大小。
@AbelValdez 我做到了。
我在下面做了评论
@afarley hmm 我不想限制中间容器（它可以随心所欲地增长），但页眉和页脚可以保持固定。

标签： html css css-shapes

【解决方案1】：

到目前为止的答案并没有错，但 IMO 他们是不完整的。如果您想让您的圈子在向下滚动时被“切断”并且不可见，则需要将其包含在另一个限制其可见性的元素中。 position:absolute; 是解决方案的一部分，但它会将您的元素相对于已定义位置的最近包含元素定位 - 因此您的页脚 div 可能需要添加 position:relative;。然后，您需要确保应该被切割的圆圈部分不可见，即使它溢出页脚的底部，所以添加overflow:hidden 将完成这项工作。这应该会让你朝着正确的方向前进：

.footer {
  position:relative;
  overflow:hidden;
}

您可能希望也可能不希望将其应用于页脚 div，但原理是相同的...溢出的元素将可见并导致滚动，除非您告诉他们不要这样做，因此让它溢出页面是真的是通过让另一个元素“裁剪”或隐藏会溢出的部分而产生的错觉。正如其他一些答案所建议的那样，您可以通过设置 body 或 html 元素的样式来做到这一点，但是如果您使用更接近您想要被切断的元素，则行为通常更容易预测。例如设置固定高度或'overflow:hidden;'如果您添加的内容高于屏幕，则在 body 上会阻止您的页面滚动。

【讨论】：

嗨！有一个小问题。页脚已经有一个相对位置并添加了溢出：隐藏很好地剪辑了圆圈的底部，但也剪辑了顶部。
您可能需要调整圆圈的大小和位置（顶部/左侧值）以及页脚的大小以达到您的确切效果 - 希望我所描述的概念能给您您需要根据需要进行试验和自定义的信息，

【解决方案2】：

你添加元素body和css如下：

body{
  position: relative;
  height: 100vh;
  overflow: hidden;
}
#circleTop {
    width: 55rem;
    height: 55rem;
    background-image: linear-gradient(120deg, red, yellow);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    right: -25rem;
    top: -25rem;
}

#circleBottom {
    position: absolute;
    width: 55rem;
    height: 55rem;
    background-image: linear-gradient(120deg, green, blue);
    border-radius: 50%; 
    z-index: -1;
    left: -25rem;
    bottom: -25rem;
}

<body>
  <div class="header">
    <div id="circleTop"></div>
    <div class="headerBox">
      <h1>Headline</h1>
      <h2>Subheading</h2>
    </div>
  </div>

  <div class="footer">
    <div id="circleBottom"></div>
    <div class="section">
      <a href="#">Link</a>
      <a href="#">Link</a>
    </div>
    <div class="otherLinks">
      <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>
  </div>
</body>

【讨论】：

最好解释一下在正文上添加height:100vh 的目的/效果。我认为这对模型的内容做了一些很大的假设，并且当在不同尺寸的屏幕上查看页面时会导致一些显示问题......例如在平板电脑和笔记本电脑上。你走在正确的轨道上，但如果不澄清你的 sn-p 正在做什么，它很可能会给 OP 带来比它所解决的更大的挑战。

【解决方案3】：

尝试使用底部左圆的跟随类

#circleBottom {
    width: 50rem;
    height: 50rem;
    background-image: linear-gradient(120deg, green, blue);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    left: -15%;
    bottom: -15%;
}

Circle example

【讨论】：

是的，我刚试过。可惜没有解决。添加溢出：隐藏到页脚部分解决了问题。它确实削减了行李箱，但也削减了顶部。