當我向上移動部分時如何刪除身體高度的額外空白

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 的父級並將這些屬性提供給它..