4

Estou tentando fazer a DIV pai ser preenchida por todas as DIVS filhas, porém já tentei várias coisas e não funciona. Acaba sempre a DIV pai sendo extrapolada pelas filhas.

EDIT: Testei meu código exemplo e fica assim: inserir a descrição da imagem aqui

DIV pai = #corpo;

DIVs filhas = todas as DIVS dentro de #corpo

* {
    margin: 0;
    padding: 0;
}

nav {
    background: blue;
    width: 100%;
    height: 34px;
    display: flex;
    justify-content: space-between;
}      

#corpo {
    width: 100%;
    height: 100%;
    background: red;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

#corpo div {
    clear:both;
    border: 1px solid gray;
    border-radius: 8px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    width: 200px;
    height: 200px; 
}

#destaques {
    background: yellow;
    width: 200px;
    height: 30px;
}

.post {
    background: lightgray;
}

.post h1 {
    margin-bottom: 30px;
    font-size: 14px;
}

.post img {
    width: 200px;
    height: 100px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#footer {
    background: lightgreen;
    clear: both;
}
<nav>
    <div id="menu">Logo</div>
    <div id="logo"><img src="logo.png"></div>
    <div div="search">Search</div>
</nav>    
<div id="corpo">
    <div class="post"> <img src="https://unsplash.it/200/300?random=1" />
        <h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
        <p>11 MAR 17</p>
    </div>
    <div class="post"> <img src="https://unsplash.it/200/300?random=2" />
        <h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
        <p>11 MAR 17</p>
    </div>
    <div class="post"> <img src="https://unsplash.it/200/300?random=3" />
        <h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
        <p>11 MAR 17</p>
    </div>
    <div class="post"> <img src="https://unsplash.it/200/300?random=4" />
        <h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
        <p>11 MAR 17</p>
    </div>
    <div class="post"> <img src="https://unsplash.it/200/300?random=5" />
        <h1>Neutralidade da rede: planos com whatsapp gratuito são ou nao ilegais?</h1>
        <p>11 MAR 17</p>
    </div>
</div>
<div id="footer"> Footer </div>

13
  • 1
    Não entendi. Reproduzi aqui e não notei nada de estranho.
    – TheBiro
    Commented 14/03/2017 às 18:02
  • Não ficou claro o que você deseja. Você quer o header/footer fixos? agrupar os pontos no body? tornar a pagina responsiva? Commented 14/03/2017 às 18:09
  • Parece estar funcionando corretamente. O que você quer dizer com extrapolar? Commented 14/03/2017 às 18:10
  • Não entendi muito bem o erro que você esta tendo, testei o código e parece estar certo! Commented 14/03/2017 às 18:11
  • @WillianTártaro testei meu codigo de exemplo e tirei um foto mostrando o problema.
    – Amzero
    Commented 14/03/2017 às 18:15

2 Respostas 2

5

Aqui aparece tudo normal, mas tenta aplicar um overflow: auto no #corpo.

EDIT:

Retire o height: 100%;.

5
  • O overflow de #corpo já estava em visible. Isso obriga os browser a mostrarem. O auto deixa o browser escolher mostrar ou não. Por duvidas testei o auto e não funcionou.
    – Amzero
    Commented 14/03/2017 às 18:24
  • 1
    @Amzero Tenta o overflow: auto; mas tirando o height: 100%; Commented 14/03/2017 às 18:28
  • Tirei o overflow e o height: 100%. Funcionou! Não entendi nada. O problema era o height: 100%. Sabe o por que?
    – Amzero
    Commented 14/03/2017 às 18:32
  • 2
    @Amzero Como você pode ver, já estava funcionando para o de todo mundo, menos o seu. Não vou saber te explicar direito o porque disso, mas só me lembrei de já ter acontecido de forma similar comigo. Se eu tivesse que forçar uma explicação, eu diria que o height: 100%; estava fixando a sua div em uma altura que não corresponde ao total. O overflow: auto; força ele a se adaptar aos filhos. É mais prático assim. Commented 14/03/2017 às 18:35
  • Saquei. Muito Obrigado pela ajuda.
    – Amzero
    Commented 14/03/2017 às 18:39
3

Complementando a resposta do @LeonFreire A causa do problema é o overflow: visible junto ao `height: 100%, mas...

Por quê?

O height: 100% pega 100% da tela de acordo com seu elemento pai, e digamos... Qual o tamanho do seu div #corpo? 100%.
Ok, não muito claro, o 100% foi definido de acordo com o tamanho da viewport(área visível da tela), pois o body tem esse tamanho (100% da tela) no carregamento, que é fixo(lê-se absoluto).

O overflow: visible, obriga o conteúdo a aparecer, mesmo que o pai não tenha tamanho para isso, por isso o conteúdo "extrapolava", pois o conteúdo tinha um tamanho maior que a div, que era do tamanho da tela visível.

Mas sabe o real motivo desse "bug"?

Nosso navegador não está utilizando as especificações corretas do HTML(5), pela falta do <!DOCTYPE html>, ele chutou um com base no seu html[1].
Em alguma versão a tag <body> tem inicialmente o tamanho da viewport e não o tamanho do seu conteúdo, fazendo com que ele dê esse problema, o 100% no #corpo seria o tamanho do <body> travando ele nesse tamanho, não sendo um valor relativo (no body, na minha tela o body tinha um valor fixo de ~700px, logo #corpo tem o tamanho de 700px), pois por padrão, um valor relativo (%) dentro de outro é ignorado pois não é possível fazer os cálculos.
Então se o valor ficava travado na tamanho da viewport, você tem o problema de o contéudo da div ultrapassar o tamanho da div, sendo necessário o overflow pra mostrar, mas aí tá o problema, o overflow:visible deixa as coisas "extrapolarem" e foi resolvido o problema removendo o height:100% porque você volta o valor da div #corpo para relativo ao conteúdo, e não ao tamanho fixo do <body>.

Talvez tenha ficado confuso, mas é só pra dizer que faltava o <!DOCTYPE html> porque ele faz com que o <body> também tenha tamanho relativo ao conteúdo hehe

[1] Não sei exatamente qual o comportamento dos browsers quanto a omissão do DOCTYPE, e qual versão do DTD(Definição de Tipo de Documento) é utilizada.

1
  • 1
    Deu pra dar uma entendida aqui. E realmente eu peco em não colocar o <!DOCTYPE html> em meus arquivos html. Era justamente uma prática que eu já tinha em mente em corrigir, justamente pelo bootstrap que se não me engano, não funciona corretamente sem ele. Obrigado pela ajuda.
    – Amzero
    Commented 17/03/2017 às 16:41

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 .