为什么底部部分的内容溢出到上面的部分

Question

我正在复制 SpaceX 网站以进行一些 CSS/JS 练习。目前，我的主页由 5 个部分组成，其中包含一些内容（标题、描述和一个按钮），每个部分都有一个背景图片，到目前为止，我快完成了。

我正在测试网站在多种设备上的响应速度，遇到了一个小问题。每当我调整浏览器高度时，底部部分的内容开始溢出到上面的部分。这是它的图片。

正常外观

当我调整浏览器高度时

多次出现这种情况，例如这里也是

/* GENERAL */

* {
    padding: 0;
    margin: 0;
}

body {
    text-transform: uppercase;
    font-style: swap;
}



/* SECTIONS */

.page {
    height: 100vh;
    padding-top: 1px;
    position: relative;
}

.homepage {
    background: url("/IMGs/homepage.jpg");
    background-position: center;
    background-size: cover;
}

.second-page {
    background: url("/IMGs/SecondPage.jpg");
    background-size: cover;
}

.third-page {
    background: url("/IMGs/ThirdPage.jpg");
    background-size: cover;
}

.fourth-page {
    background: url("/IMGs/FourthPage.jpg");
    background-size: cover;
}

.fifth-page {
    background: url("/IMGs/FifthPage.jpg");
    background-size: cover;
}

.sixth-page {
    position: relative;
    height: 100vh;
}

.mission-container {
    color: white;
    text-shadow: 0 0 2px rgb(0, 0, 0);
    font-size: 2em;
    text-align: left;
    position: absolute;
    left: 10%;
    bottom: 20%;
}

.launch {
    margin-bottom: 0.3em;
    font-size: 0.8em;
    font-weight: 100;
}

.mission-name {
    margin-bottom: 1em;
}

.dragon {
    margin-bottom: 0.35em;
}

.mission-text {
    font-size: 0.5em;
    margin-bottom: 2em;
    line-height: 30px;
}

.rewatch-btn {
    border: 2.5px solid white;
    color: white;
    text-decoration: none;
    font-size: 0.6em;
    padding: 0.9em 2.3em;
}

@media screen and (max-width: 947px) {
    .mission-container {
        left: 8%;
        bottom: 18%;
        font-size: 1.4em;
    }

    .rewatch-btn {
        padding: 1.5em 3.5em;
    }

}

@media screen and (max-width: 747px) {
    .third-page {
        background: url("/IMGs/ThirdPage_mobile.jpg");
        background-position: center;
        background-size: cover;
    }

    .fourth-page {
        background: url("/IMGs/FourthPage_mobile.jpg");
        background-size: cover;
    }
}

<html>
<body>
    <section class="homepage page">
        <div class="mission-container first">
            <h4 class="launch">recent launch</h4>
            <h1 class="mission-name">TRANSPORTER-2 MISSION</h1>
            <a href="#" class="rewatch-btn">REWATCH</a>
        </div>
    </section>
    <section class="second-page page">
        <div class="mission-container">
            <h4 class="launch">recent launch</h4>
            <h1 class="mission-name">CRS-22 MISSION</h1>
            <a href="#" class="rewatch-btn">REWATCH</a>
        </div>
    </section>
    <section class="third-page page">
        <div class="mission-container">
            <h4 class="launch">completed mission</h4>
            <h1 class="mission-name dragon">DRAGON RETURNS TO <br> EARTH</h1>
            <p class="mission-text">After 167 days, Dragon completes its first long-duration mission.</p>
            <a href="#" class="rewatch-btn">REWATCH</a>
        </div>
    </section>
    <section class="fourth-page page">
        <div class="mission-container">
            <h4 class="launch">RECENT LAUNCH</h4>
            <h1 class="mission-name">STARLINK MISSION</h1>
            <a href="#" class="rewatch-btn">REWATCH</a>
        </div>
    </section>
    <section class="fifth-page page">
        <div class="mission-container">
            <h1 class="mission-name">Starship to <br> Land NASA <br> Astronauts on <br> the Moon</h1>
            <a href="#" class="rewatch-btn">LEARN MORE</a>
        </div>
    </section>
   
</body>
</html>

你们对如何解决这个问题有什么建议吗？提前致谢！

Answer 1

我注意到在代码中高度属性是使用“vh”（垂直高度）而不是“px”（像素）设置的。像素是屏幕上的距离单位，无论页面如何调整大小都不会改变。 vh（垂直高度）是由视口确定的屏幕上的距离单位。 1vh 是视口高度的 1%。 Learn More about viewport units here.

Answer 2

是的，在调整页面大小时，垂直高度会导致溢出。 px 或 vh 或 vw（垂直宽度）并没有真正的替代方案。我想你可以使用页面的百分比设置高度

height: 10%;

然而，这意味着每次添加或删除元素时它的高度都会发生变化，因此我建议使用更多 javascript 方法来检测屏幕高度，然后设置元素高度以匹配屏幕高度。

function coverScreen(myElementArray) {
// store screen height in variable;
var sh = screen.height;

//loop through elements in array and assign height value
for (var i = 0; i < myElementArray; i++){
myElementArray[i].style.height = sh + "px";
}
}

// get elements and store in variables
var el1 = document.getElementById("myElementsIdHere");
var el2 = document.getElementById("myElementsIdHere");
var el3 = document.getElementById("myElementsIdHere");

//call function and fill parameter 
//with array containing element variables
coverScreen([el1, el2, el3]);

为什么底部部分的内容溢出到上面的部分

Why is the content from the bottom sections overflowing to the sections above

html

css

responsive