Page content going outside the parent element

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 this: I want the div id = hello area to occupy 100% of the viewport when the site loads. The empty div id = front-bg serves only to place a background image that also expands to the entire viewport. And the rest of the content should be shown as the page rolled. ONLY to put the height of the div id = hello as 100% I needed to put height: 100%; on 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 that when I put height: 100% on the .front-page selector, the panel with id = about flowed well out of the class = front-page div. If I take this line, the id = about flows below the id = hello, within the viewport, which I wanted to appear only when scrolling the page. And if I leave this line, the id = about flows out of the class = front-page overlaps the footer at the bottom of the page.

I do not know what to do. Any light is much appreciated!