Breaks in CSS measures

Asked

Viewed 40 times

1

I’m really confused how the measurement percentages of CSS (in particular %) and property 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>

In that code the tag <body>goes beyond the HTML, Why does this happen? Being that, I defined the property HTML as 600px, the body should not go up 600px and not exceed this value? Since the tag <body> has your father as <html>, should not be respected?

Edit1: I checked that this happens with other child components too:

        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>

css property height

2 answers

2

This is a problem of border Collapse, part of it is described here: Why margin-top affects the father div

inserir a descrição da imagem aqui

But basically, what happens is that the standard margin of user-agent of body is not collapsing with the standard margin du user-agent of HTML, as this vc has a difference of 8px height approximately (with 1px edge becomes easier to see), pushing the body out of HTML, if you put margin-top: 0; in the body you solve the problem. You can read something in this sense here Why "html, body" and not just "body" to delete page margins?

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>

About me your second example

Just put the property down box-sizing: border-box; in the parent container, thus the width of the border does not add to height of 100% of the element itself.

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

Well this sounds strange but analyze something , before the body what comes before? Try working with Dives to see if the same happens.

<html>
  <head>
</head>
<body>
<div id="pai">
<div id="filho">
</div>
</div>
</body>
</html>

  • We usually use id to work with something more specific, unfortunately it is not the case of my question... The question refers to more types of measures, not a solution in general. For one only works on the body with the measure height he normally respects the html, but the opposite (as mentioned in the question above) does not work and I would like to know why.

  • Welcome guy to en.Stackoverflow, man explains this better then, because you can barely understand what you wrote, your answer has no sense whatsoever...

Browser other questions tagged css property height

You are not signed in. Login or sign up in order to post.