Div with other Divs inside

Question

I just want to make one div, as if it were a windows window, with title, body and a button bar at the end. But I don’t know why, depending on the size of the window, it "leaks" or is left over screen... I wanted the title and the bar to have fixed sizes, and the body to take the rest of the screen. Look at my code:

<div id='tela' class='tela'>
    <div id='tela_titulo' class='tela_titulo'>TITULO</div>
    <div id='tela_corpo' class='tela_corpo'>CorpoCorpo</div>
    <div id='tela_botao' class='tela_botao'>botao</div>
</div>

and the css:

.tela
{  
  height:100px;
  width:300px;
  border:2px solid #ffec24;
}

.tela_titulo
{  
  position:relative;
  height:10%;
  border:2px solid #000000;
}

.tela_corpo
{  
  position:relative;
  height:80%;
  border:2px solid #000000;  
}

.tela_botao
{  
  height:10%
  border:2px solid #000000;  
}

But this way he’s throwing the bar out of the div.

Answer 1

In fact this leak occurs because of the edges. In the way that the CSS works, each element has the height in percentage plus the size of the border. Example: the height of the .tela_titulo yeah, actually, 2px + 10% + 2px.

Next to that, you should consider that the 10% height may not be exactly what you need, because when the div is too small, the bar .tela_titulo will get minuscule.

My approach to this case:

div{
  box-sizing: border-box;
}

.tela{
  position: relative;
  width: 300px;
  height: 100px;
}

.tela div{
  border: 2px solid grey;
}

.tela_titulo{
  width: 100%;
  height: 20px;
  
  background-color: navy;
  color: white;
}

.tela_corpo{
  width: 100%;
  height: calc(100% - 40px);
}

.tela_botao{
  width: 100%;
  height: 20px;
  
  background-color: grey;
}

<div id='tela' class='tela'>
    <div id='tela_titulo' class='tela_titulo'>TITULO</div>
    <div id='tela_corpo' class='tela_corpo'>CorpoCorpo</div>
    <div id='tela_botao' class='tela_botao'>botao</div>
</div>

The estate box-sizing changes the way the browser calculates the element’s dimensions. Now, the border is within height and width - that is, avoids the problem of having height + border.

In the element .tela_corpo, used calc() to explicitly say: the height should be 100% least the size of the top and bottom bar (20 + 20).

Answer 2

Replace the height of .tela to 100%.

.tela {  
  height:100%;
  width:300px;
  border:2px solid #ffec24;
}