当我向上移动部分时如何删除身体高度的额外空白

Question

我正在制作一个网站，并想在各个部分中添加一个彩色圆圈背景。 然而，当我旋转圆圈时，它们会为身体增加额外的高度。 它会导致页面末尾出现额外的空白。

我怎样才能删除那些空白？ 或者，如果有人知道如何在不增加身体高度的情况下跨部分添加颜色背景？

这是我到目前为止所做的：

 .green { width: 400rem; height: 70rem; background-color: rgba(23, 132, 17, 0.2); transform: rotate(30deg); position: relative; left: -40%; bottom: -30rem; }.blue { width: 400rem; height: 70rem; background-color: rgba(34, 116, 165, 0.2); transform: rotate(15deg); position: relative; left: -40%; bottom: 40rem; }

 <section class="intro"> <div class="container"> <h3><span>Supportive Care</span> reduces the rates of re-hospitalization and unnecessary procedures and increases patient satisfaction. It allows patient/family to be more in tune with what's going on and what choices are available to them.</h3> <h3>We develop a plan of care consistent with the patient/family's cultural, social, religious and spiritual beliefs, review advanced directives and POLST (Physical Orders for Life-sustaining Treatment), discuss prognosis, disease course and realistic expectations, and coordinate care with all the physicians on the case.</h3> </div> <div class="green"></div> <div class="blue"></div> </section>

圆圈是蓝色和绿色。 在介绍和常见问题部分之间。

Answer 1

做一件事。 给你的身体标签

body{
 overflow: hidden;
 width: 100%;
 height: 100vh;
}

或者让你的部分介绍的 class 的父级并将这些属性提供给它..