文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么下面部分的内容会溢出到上面的部分

问为什么下面部分的内容会溢出到上面的部分
EN

Stack Overflow用户

提问于 2021-08-12 15:29:48

回答 2查看 29关注 0票数 0

我正在制作一个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>

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

html

css

responsive

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-08-13 23:02:21

是的，当调整页面大小时，是垂直高度导致溢出。对于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]);

票数 1

Stack Overflow用户

发布于 2021-08-12 16:01:56

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68760296

复制

相似问题

问为什么下面部分的内容会溢出到上面的部分
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么下面部分的内容会溢出到上面的部分EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么下面部分的内容会溢出到上面的部分
EN