1

Estou bem confuso como funciona as porcentagens de medida do CSS (em específico o %) e a propriedade height

    html {
        border: solid 5px #000000;
        height: 600px;
        margin: 10px;
        
    }
    body {
        border: solid 5px #470eaf;
        height: 100%;
        box-sizing: border-box;
    }
    .app {
        border: solid 5px #ff0202;
        
    }
<body>
    <div class="app">
        <div>Cabeçalho</div>
        <div>Corpo</div>
        <div>Rodapé</div>
    </div>
</body>

Nesse código a tag <body>ultrapassa o HTML, por que isso acontece? Sendo que, eu defini a propriedade HTML como 600px, o body não devia ir até 600px e não ultrapassar esse valor? Já que a tag <body> tem seu pai como <html>, não deveria ser respeitado?

Edit1: Verifiquei que isso acontece com outros componentes filhos também:

        html {
            border: solid 5px black;
            
        }
        body {
            border: solid 5px red; /*pai de .app*/
            height: 600px; 
        }
        .app {
            border: solid 5px violet; /*Filho de body*/
            display:flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 100%;
        }
        .app div.cabecalho {
            border: solid 5px blue;
            
        }
        .app div.corpo {
            border: solid 5px blue;
        }
        .app div.rodape {
            border: solid 5px blue;
        }
    <div class="app">
        <div class="cabecalho">Cabeçalho</div>
        <div class="corpo">Corpo</div>
        <div class="rodape">Rodapé</div>
    </div>

2 Respostas 2

2

Esse é um problema de border collapse, parte dele está descrito aqui: Porque margin-top afeta a div pai

inserir a descrição da imagem aqui

Mas basicamente, o que acontece é que a margem padrão do user-agent do body não está collapsando com a margem padrão du user-agent do HTML, como isso vc tem uma diferença de 8px de altura aproximadamente (com borda de 1px fica mais fácil de ver), empurrando o body para fora do HTML, se vc colocar margin-top: 0; no body vc resolve o problema. Vc pode ler algo nesse sentido aqui Por que "html, body" e não apenas "body" para eliminar as margens da página?

inserir a descrição da imagem aqui

html {
  border: solid 5px #000000;
  height: 600px;
  margin: 10px;

}

body {
  border: solid 5px #470eaf;
  height: 100%;
  box-sizing: border-box;

  margin-top: 0; /* isso corrige o problema */
}

.app {
  border: solid 5px #ff0202;

}
<body>

  <div class="app">
    <div>Cabeçalho</div>
    <div>Corpo</div>
    <div>Rodapé</div>
  </div>
  
</body>


Sobre eu seu segundo exemplo

É só colocar a propriedade box-sizing: border-box; no container pai, assim a largura do border não se soma a height de 100% do próprio elemento.

html {
  border: solid 5px black;
}

body {
  border: solid 5px red;
  /*pai de .app*/
  height: 600px;
}

.app {
  border: solid 5px violet;
  /*Filho de body*/
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;

  box-sizing: border-box; /* Isso resolve o problema */
}

.app div.cabecalho {
  border: solid 5px blue;

}

.app div.corpo {
  border: solid 5px blue;
}

.app div.rodape {
  border: solid 5px blue;
}
<body>

  <div class="app">
    <div>Cabeçalho</div>
    <div>Corpo</div>
    <div>Rodapé</div>
  </div>

</body>

-2

Bom isso parece estranho mas analise uma coisa , antes do body o que vem antes? Tenta trabalhar com dives para ver se acontece o mesmo.

<html>
  <head>
</head>
<body>
<div id="pai">
<div id="filho">
</div>
</div>
</body>
</html>
2
  • Geralmente usamos id para trabalhar com algo mais específico, infelizmente não é o caso da minha pergunta... A pergunta se refere a mais tipos de medidas, e não uma solução em geral. Pois se trabalho apenas em cima do body com a medida height ele respeita normalmente o html, porém o contrário (como citado na pergunta anteriormente) não funciona e gostaria de saber o por que.
    – user168265
    16/08/2020 às 18:12
  • Cara bem vindo ao pt.StackOverflow, cara explica melhor isso ai, pq mal da para entender o que vc escreveu, sua resposta não tem sentido algum... 16/08/2020 às 19:03

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