0

Eu só quero fazer uma div, como se fosse uma janela do windows, com titulo, corpo e uma barra de botões no fim. Mas não sei porquê, dependendo do tamanho da janela, ele "vaza" ou fica sobrando tela... Eu queria que o título e a barra tivessem tamanhos fixos, e o corpo tomasse o resto da tela. Olhem meu código:

<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>

e o 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;  
}

Mas desse jeito ele tá jogando a barra para fora da div.

2 Respostas 2

2

Na verdade esse vazamento ocorre por causa das bordas. No modo que o CSS funciona, cada elemento possui a altura em porcentagem mais o tamanho da borda. Exemplo: a altura do .tela_titulo é, na verdade, 2px + 10% + 2px.

Junto a isso, você deve considerar que os 10% de altura pode não ser exatamente o que você precisa, pois, quando a div for muito pequena, a barra .tela_titulo vai ficar minúscula.

Minha abordagem para esse caso:

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>

A propriedade box-sizing muda a maneira como o browser calcula as dimensões do elemento. Agora, a borda fica dentro da altura e da largura - ou seja, evita o problema de ter height + border.

No elemento .tela_corpo, usei calc() para dizer explicitamente: a altura deve ser 100% menos o tamanho da barra superior e da barra inferior (20 + 20).

0

Substitua o height do .tela para 100%.

.tela {  
  height:100%;
  width:300px;
  border:2px solid #ffec24;
}
1
  • Valews bro, uma coisa tao simples kk e eu tava apanhando...valews! Commented 2/03/2016 às 1:57

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 .