2

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!

1 Resposta 1

1

Com o CSS vh fica bem tranquilo de resolver:

.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>

Para saber mais dá uma olhadinha AQUI.

1
  • Muitíssimo obrigada, Thiago. Pela solução e pelo artigo também. Só tive que tirar o height: 100%; do .front-page que deu certo, e também eliminou a necessidade de colocar height: 100%; em todos os elementos pais. 9/02/2017 às 18:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .