Page content escaping from the parent element

Question

I’m making a simple website with the following structure:

<div class="front-page">
    <main>
        <div id="hello">
            <article>
                <header class="post-header">
                    <h2>Título da página</h2>
                </header>

                <div class="post-content">
                    <p>Conteúdo da página...</p>
                </div>
            </article>
        </div>

        <div id="front-bg"></div>

        <div id="about" class="panel">
            <h2>Sobre mim</h2>
            <p>Conteúdo do painel sobre mim...</p>
        </div>

    </main>
</div>

The goal is as follows: I want the area of div id=hello to occupy 100% of the viewport when the site loads. The empty div id=front-bg only serves to place a background image that also expands to the entire viewport. And the rest of the content should be shown when scrolling the page. ONLY THAT to put the height of the div id=hello as 100% I had to put height: 100%; in ALL parent elements up to html.

The CSS is as follows:

.front-page {
    height: 100%;
}

.front-page main {
    margin-top: 0;
    padding-top: 40px;
    height: 100%;
}

#front-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    background: url(img/landscape.png) center center no-repeat fixed;
    background-size: cover;
}

.front-page #hello {
    height: 100%;
}

.front-page .panel {
    position: static;
}

What happens is, when I put height: 100% on the selector .front-page, the id=about panel flowed well out of the div class=front-page. If I take that line, id=about flows below id=hello, inside the viewport, which I wanted to appear only when scrolling the page. And if I leave that line, the id=about flows outside the class=front-page overlay the footer you have at the bottom of the page.

I don’t know what I do to solve it. Any light is much appreciated!

Answer 1

With the CSS vh is very quiet to resolve:

.front-page {
    height: 100%;
}

.front-page main {
    margin-top: 0;
    padding-top: 40px;
    height: 100%;
}

#front-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    background: url(img/landscape.png) center center no-repeat fixed;
    background-size: cover;
}

.front-page #hello {
    height: 100vh; 
}

.front-page .panel {
    position: static;
}

<div class="front-page">
    <main>
        <div id="hello">
            <article>
                <header class="post-header">
                    <h2>Título da página</h2>
                </header>

                <div class="post-content">
                    <p>Conteúdo da página...</p>
                </div>
            </article>
        </div>

        <div id="front-bg"></div>

        <div id="about" class="panel">
            <h2>Sobre mim</h2>
            <p>Conteúdo do painel sobre mim...</p>
        </div>

    </main>
</div>

To find out more take a look HERE.