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 "%".
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeAcredito 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>
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).
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.