8

Criei este Fiddle como teste.

Querendo eu ter o ecrã dividido metade verde, metade vermelho, por que é que se na propriedade height eu colocar o valor seguido de "%" a div desaparece? Estando aqui a dizer que se pode usar "%".

3 Respostas 3

9

Acredito que isto resolva seu problema. A porcentagem da altura só pode ser obtida se for relativa à outro elementos que contém estas divisões. Você tem que determinar como os blocos superiores devem se comportar em relação à altura.

html, 
body  {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#dv1 {
    width : 100%;
    height : 50%;
    background-color : red;
}

#dv2 {
    width : 100%;
    height : 50%;
    background-color : green;
}
<div id="dv1"></div>
<div id="dv2"></div>

Coloquei no GitHub para referência futura.

6

Quando você coloca um tamanho em porcentagem, o valor é calculado com base no tamanho do elemento pai. Tendo isso em mente, é interessante notar que por padrão, não existe uma altura definida em um site em branco (ou até com conteúdo). Para ver isso, use o Inspecionar elemento e que veja na tag body existe uma largura, mas a altura é 0 (ela aumenta de acordo com o conteúdo do site).

Para mudar isso, a técnica é simplesmente definir um valor para o body e o html:

body, html {
    height: 100%;
}

Após isso, os elementos com tamanho em porcentagem irão ter seus valores calculados corretamente (anteriormente eram calculados com 0).

4

Height aceita porcentagem sim.

Olha um exemplo:

#tudo {
  width: 300px;
  height:300px;
}

.bloco-vermelho {
  width: 100%;
  height: 50%;
  background-color: red;
}
.bloco-verde {
  width: 100%;
  height: 50%;
  background-color: green;
}
<div id="tudo">
<div class="bloco-vermelho">
</div>
<div class="bloco-verde">
</div>
  </div>

Você pode voltar no seu código e conferir se há ponto e vírgula no final, pois é uma falha comum na hora de aplicar CSS.

1
  • Eu já percebi qual era o problema. O problema era que eu não tinha dado nenhum valor para o html e body, os "pais" da div 9/04/2015 às 10:22

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 .