Div with other divs inside

Question

Div with other divs inside

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I just want to make a div , as if it were a windows window, with title, body and a button bar at the end. But I do not know why, depending on the size of the window, it "leaks" or is left over the screen ... I wanted the title and the bar had fixed sizes, and the body took 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 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 that way he's throwing the bar out of div .

css div

asked by anonymous 02.03.2016 / 02:37

2 answers

0

Replace height from .tela to 100%.

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

02.03.2016 / 02:44

Writing variables to the database and retrieving them and assigning value How to Create Tabular Data with Link See More?

score 2 · Accepted Answer

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

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

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 box-sizing property changes the way the browser calculates the dimensions of the element. Now the border is in of height and width - that is, it avoids the problem of having height + border .

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