html - 超大屏幕剪切文本

Question

当我的分辨率较低时，我的 Jumbotron 剪切的是文本和按钮。 我需要用媒体查询来解决这个问题吗？

或者对此有“更好”的解决方案吗？目前我只有宽度的媒体查询。

.hero-bg {
    background-color: #2e82b0;
}

.img-logo {
    max-width: 100%;
}

.jumbotron {
    height: 100vh;
}


<!-- Header -->
    <section id="home" class="hero-bg jumbotron">
        <div class="container">
            <div class="row align-items-center justify-content-center mx-auto">
                <div class="col mt-0 pt-0">
                    <hr class="mt-0 pt-0 mb-5 sichtbar" style="background: white;">
                    <br>
                    <img class="img-logo mt-5 pt5 mx-auto img-fluid d-block img-responsive" src="assets/img/logo.png" alt="Rollywood-Logo">
                </div>
            </div>
            <div data-aos="zoom-in" class="row align-items-end justify-content-center mx-auto text-center mt-5 pt-5">
                <div class="col pb-3">
                    <h2 class="jumb-title">Willkommen in meiner Welt:</h2>
                    <p class="lead jumb-p">
                        Mit emotionalen Worten und kreativen Konzepten die passende Bühne bereiten. <br />
                        <span>Überzeugen. Begeistern. Bewegen – und der Star sind SIE!</span></p>
                    <a href="#texting" role="button" class="jumb-btn btn-round mt-2 smooth">
                        <large><span class="icon-arrow-down"></span></large>
                    </a>
                </div>
            </div>

            <!-- col -->
        </div>
        <!-- container -->
    </section>
</header>
<!-- Header -->

Answer 1

您应该使用 min-height 而不是 height...

.jumbotron {
    min-height: 100vh;
}