javascript - If i resize the browser vertically, footer and content are shifted up

Question

If i resize the browser vertically, footer and content are shifted up but if i do the same in another page of my website, this don't happen. It happens only if i have a div with id 'hero'.

In a page i have only a div with id 'poster' and all is fine, when i resize the browser vertically, all the contents are cutted off, as i want.

In a page i have a div with id 'hero' and when i resize the browser vertically, the footer and the contents are shifted up.

I put some images:

Right one page

Second page with right layout

Now i have resized the browser vertically:

Second page with bad layout

I think it's a problem by the CSS, so i'll give you the 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 of bad page:

<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 of right page:

<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:[email protected]">[email protected]</a></p>
                <h4>Lavora con noi</h4>
                <p>
                Vuoi lavorare con TicketOne? Sei alla ricerca di uno stage? <br>Scrivi a: <a href="mailto:[email protected]">[email protected]</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

Change your height in #heroEventi to height: 100vh;

#heroEventi {
    height: 100vh;
}

It seems your "correct" page has a height of 100vh associated with it.

1 other thing I saw incase changing the height doesn't work is to add padding: 100px 0; to #heroEventi As it seems your correct page has a padding and your bad page doesn't. So this could also be the issue.

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