如果我垂直调整浏览器的大小，页脚和内容会向上移动

Question

如果我垂直调整浏览器的大小，页脚和内容会向上移动，但如果我在网站的另一个页面上执行相同的操作，则不会发生这种情况。只有当我有一个id为'hero‘的div时，才会发生这种情况。

在一个页面中，我只有一个id为'poster‘的div，一切都很好，当我垂直调整浏览器的大小时，所有的内容都被剪切掉了，正如我所希望的那样。

在一个页面中，我有一个id为'hero‘的div，当我垂直调整浏览器的大小时，页脚和内容会向上移动。

我放了一些图片：

Right one page

Second page with right layout

现在我已经垂直调整了浏览器的大小：

Second page with bad layout

我认为这是CSS的问题，所以我将给您CSS：

#hero, #heroEventi {
    display: flex;
    width: 100%;
    height: 92%;
    align-items: center;
    background: linear-gradient(0deg, rgba(0,0,0,.2), rgba(0,0,0,0.9)), url('../img/bg-hero.jpg') no-repeat center center;
    background-size: cover;
}

#heroEventi {
    min-width: 620px;
    background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0.7)), url('../img/bg-eventi.jpg') no-repeat center center;
    background-size: cover;
}

#hero__content, #heroEventi__content {
    background-color: transparent;
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
}

#heroEventi {
    height: 53%;
}


#poster {
    height: 100vh;
    display: flex;
    width: 100%;
    align-items: center;
}

#poster__img {
    width: 65%;
    height: 100%;
}

#poster__img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#poster__content {
    height: 100vh;
    width: 35%;
    padding: 50px;
    flex-wrap: wrap;
}

#poster__content h3 {
    padding-bottom: 10px;
}

#posterhero, #posterheroContatti {
    display: flex;
    padding: 100px 0;
    background: linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,0.8)), url('../img/bg-aboutus.jpg') no-repeat center center;
    background-size: cover;
}

#posterheroContatti {
    background: linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,0.8)), url('../img/bg-contacts.jpg') no-repeat center center;
    background-size: cover;
}

#posterherotitle {
    background-color: transparent;
    width: 50%;
    padding: 50px;
    display: flex;
    align-items: center;
}

#posterhero__text {
    background-color: transparent;
    width: 50%;
    padding: 30px;
    padding-right: 10%;
}

坏页面的HTML：

<div id="heroEventi">
            <div id="heroEventi__content">
                <h1>Eventi</h1>
                <div id="searchBar">
                    <h2> Ricerca degli eventi </h2>
                    <div id="flexSearch">
                        <div id="customSelectCat">
                            <?php
                                if(isset($_SESSION['option'])){
                                    echo $_SESSION['option'];
                                    unset($_SESSION['option']);
                                } else {
                            ?>
                                    <select id="listCat">
                                        <option value="" disabled selected hidden>Seleziona la categoria</option>
                                        <option value="Concerti">Concerti</option>
                                        <option value="Sport">Sport</option>
                                        <option value="MostreEMusei">Mostre e Musei</option>
                                        <option value="Teatro">Teatro</option>
                                    </select>
                            <?php
                                }
                            ?>
                            <span id="customArrowCat"></span>
                        </div>
                        <div id="customSelectSotCat">
                            <select id="listSotCat">
                            </select>
                            <span id="customArrowSotCat"></span>
                        </div>
                        <input type="date" id="dateFrom" name="dateFrom" onkeydown="return false">
                        <input type="date" id="dateTo" name="dateTo" onkeydown="return false">
                        <button id="cerca">Cerca</button><br>
                    </div>
                </div>
            </div>
        </div>

右侧页面的HTML：

<div id="posterheroContatti">
            <div id="posterherotitle">
                <h3>Contatti</h3>
            </div>
            <div id="posterhero__text">
                <h4>Informazioni sugli eventi</h4>
                <p>Sei un navigatore DailyTicket? Desideri maggiori informazioni sugli eventi che ti interessano?<br>Chiama il call center al numero 000.111. (Il costo della chiamata da rete fissa è di 1 euro al minuto senza scatto alla risposta.  Il costo massimo del servizio da rete mobile è di 1 euro e 50 centesimi al minuto con scatto alla risposta di 12,91 centesimi.)</p>
                <h4>Partnership e iniziative Marketing</h4>
                <p>Sei un’azienda o un’istituzione che vuole sviluppare una partnership o un’iniziativa di co-marketing? DailyTicket prenderà in considerazione le tue esigenze ed effettuerà un analisi approfondita. Scrivi a: <a href= "mailto:marketing@dailyticket.it">marketing@dailyticket.it</a></p>
                <h4>Lavora con noi</h4>
                <p>
                Vuoi lavorare con TicketOne? Sei alla ricerca di uno stage? <br>Scrivi a: <a href="mailto:lavoraconnoi@dailyticket.it">lavoraconnoi@dailyticket.it</a><br>
                Vi ricordiamo che verranno prese in considerazione solo le candidature inviate all'indirizzo mail sopra indicato, i curricula spediti a qualsiasi altro indirizzo mail non verranno letti.
                </p>
            </div>
        </div>

Answer 1

将#heroEventi中的高度更改为height: 100vh;

#heroEventi {
    height: 100vh;
}

看起来你的“正确”页面的高度是100vh。

我还看到另外一件事，如果改变高度不起作用，那就是向#heroEventi添加padding: 100px 0;，因为看起来你的正确页面有填充，而你的坏页面没有填充，所以这也可能是问题所在。

#heroEventi {
    height: 53%;
    padding: 100px 0;
}