Estou fazendo um site simples com a seguinte estrutura:
<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>
O objetivo é o seguinte: Eu quero que a área da div id=hello ocupe 100% do viewport quando o site carrega. A div vazia id=front-bg serve só pra colocar uma imagem de background que também expanda para o viewport inteiro. E o restante do conteúdo devia ser mostrado ao rolar a página. SÓ QUE pra colocar a altura da div id=hello como 100% eu precisei colocar height: 100%;
em TODOS os elementos pais até o html.
O CSS é o seguinte:
.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;
}
O que acontece é que, quando eu coloquei height: 100%
no seletor .front-page
, o painel com id=about fluiu bem pra fora da div class=front-page. Se eu tiro essa linha, o id=about flui abaixo do id=hello, dentro do viewport, que eu queria que aparecesse só ao rolar a página. E se eu deixo essa linha, o id=about flui fora da class=front-page sobreponto o footer que tem no fim da página.
Não sei o que faço pra resolver. Qualquer luz é muito apreciada!