Skip to main content
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

Para usar medidas em relação à área exibida, use vw e vh.

Veja que o exemplo em amarelo é relativo à àrea do quadro (viewport width e viewport height).

Clique em página toda logo no canto do snippet e compare.

Se usar porcentagem, o elemento é relativo à div superior, desde que o posicionamento dela e da superior não sejam fixo ou absoluto (a interna pode até pode ter posição absoluta). É o exemplo em vermelho, 80% da altura da div amarela, e metade da largura.

#d1 {
  background:yellow;
  width:50vw;
  height:80vh;
}

#d2 {
  background:red;
  height:80%;
  width:50%;
}
<div id="d1">
  <div id="d2">
  </div>
</div>

Para uma comparação entre várias unidades de medida do CSS, veja estes posts:

É recomendado utilizar a unidade "em" ao invés de "px" para fontes?É recomendado utilizar a unidade "em" ao invés de "px" para fontes?

httphttps://pt.stackoverflow.com/questions/106962/70

Para usar medidas em relação à área exibida, use vw e vh.

Veja que o exemplo em amarelo é relativo à àrea do quadro (viewport width e viewport height).

Clique em página toda logo no canto do snippet e compare.

Se usar porcentagem, o elemento é relativo à div superior, desde que o posicionamento dela e da superior não sejam fixo ou absoluto (a interna pode até pode ter posição absoluta). É o exemplo em vermelho, 80% da altura da div amarela, e metade da largura.

#d1 {
  background:yellow;
  width:50vw;
  height:80vh;
}

#d2 {
  background:red;
  height:80%;
  width:50%;
}
<div id="d1">
  <div id="d2">
  </div>
</div>

Para uma comparação entre várias unidades de medida do CSS, veja estes posts:

É recomendado utilizar a unidade "em" ao invés de "px" para fontes?

http://pt.stackoverflow.com/questions/106962/70

Para usar medidas em relação à área exibida, use vw e vh.

Veja que o exemplo em amarelo é relativo à àrea do quadro (viewport width e viewport height).

Clique em página toda logo no canto do snippet e compare.

Se usar porcentagem, o elemento é relativo à div superior, desde que o posicionamento dela e da superior não sejam fixo ou absoluto (a interna pode até pode ter posição absoluta). É o exemplo em vermelho, 80% da altura da div amarela, e metade da largura.

#d1 {
  background:yellow;
  width:50vw;
  height:80vh;
}

#d2 {
  background:red;
  height:80%;
  width:50%;
}
<div id="d1">
  <div id="d2">
  </div>
</div>

Para uma comparação entre várias unidades de medida do CSS, veja estes posts:

É recomendado utilizar a unidade "em" ao invés de "px" para fontes?

https://pt.stackoverflow.com/questions/106962/70

adicionou 127 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Para usar medidas em relação à área exibida, use vw e vh.

Veja que o exemplo em amarelo é relativo à àrea do quadro (viewport width e viewport height).

Clique em página toda logo no canto do snippet e compare.

Se usar porcentagem, o elemento é relativo à div superior, desde que o posicionamento dela e da superior não sejam fixo ou absoluto (a interna pode até pode ter posição absoluta). É o exemplo em vermelho, 80% da altura da div amarela, e metade da largura.

#d1 {
  background:yellow;
  width:50vw;
  height:80vh;
}

#d2 {
  background:red;
  height:80%;
  width:50%;
}
<div id="d1">
  <div id="d2">
  </div>
</div>

Para uma comparação entre várias unidades de medida do CSS, veja estes posts:

É recomendado utilizar a unidade "em" ao invés de "px" para fontes?

http://pt.stackoverflow.com/questions/106962/70

Para usar medidas em relação à área exibida, use vw e vh.

Veja que o exemplo em amarelo é relativo à àrea do quadro (viewport width e viewport height).

Clique em página toda logo no canto do snippet e compare.

Se usar porcentagem, o elemento é relativo à div superior, desde que o posicionamento dela e da superior não sejam fixo ou absoluto (a interna pode até pode ter posição absoluta). É o exemplo em vermelho, 80% da altura da div amarela, e metade da largura.

#d1 {
  background:yellow;
  width:50vw;
  height:80vh;
}

#d2 {
  background:red;
  height:80%;
  width:50%;
}
<div id="d1">
  <div id="d2">
  </div>
</div>

Para usar medidas em relação à área exibida, use vw e vh.

Veja que o exemplo em amarelo é relativo à àrea do quadro (viewport width e viewport height).

Clique em página toda logo no canto do snippet e compare.

Se usar porcentagem, o elemento é relativo à div superior, desde que o posicionamento dela e da superior não sejam fixo ou absoluto (a interna pode até pode ter posição absoluta). É o exemplo em vermelho, 80% da altura da div amarela, e metade da largura.

#d1 {
  background:yellow;
  width:50vw;
  height:80vh;
}

#d2 {
  background:red;
  height:80%;
  width:50%;
}
<div id="d1">
  <div id="d2">
  </div>
</div>

Para uma comparação entre várias unidades de medida do CSS, veja estes posts:

É recomendado utilizar a unidade "em" ao invés de "px" para fontes?

http://pt.stackoverflow.com/questions/106962/70

adicionou 11 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Para usar medidas em relação à telaárea exibida, use vw e vh. 

Veja que o exemplo em amarelo é relativo à àrea do quadro (viewport width e viewport height).

Clique em página toda logo no canto do snippet e compare.

Se usar porcentagem, o elemento é relativo à div superior, desde que o posicionamento dela e da superior não sejam fixo ou absoluto (a interna pode até pode ter posição absoluta). É o exemplo em vermelho, 80% da altura da div amarela, e metade da largura.

#d1 {
  background:yellow;
  width:50vw;
  height:80vh;
}

#d2 {
  background:red;
  height:80%;
  width:50%;
}
<div id="d1">
  <div id="d2">
  </div>
</div>

Para usar medidas em relação à tela, use vw e vh. Veja que o exemplo em amarelo é relativo à àrea do quadro (viewport width e viewport height).

Clique em página toda logo no canto do snippet e compare.

Se usar porcentagem, o elemento é relativo à div superior, desde que o posicionamento dela e da superior não sejam fixo ou absoluto (a interna pode até pode ter posição absoluta). É o exemplo em vermelho, 80% da altura da div amarela, e metade da largura.

#d1 {
  background:yellow;
  width:50vw;
  height:80vh;
}

#d2 {
  background:red;
  height:80%;
  width:50%;
}
<div id="d1">
  <div id="d2">
  </div>
</div>

Para usar medidas em relação à área exibida, use vw e vh. 

Veja que o exemplo em amarelo é relativo à àrea do quadro (viewport width e viewport height).

Clique em página toda logo no canto do snippet e compare.

Se usar porcentagem, o elemento é relativo à div superior, desde que o posicionamento dela e da superior não sejam fixo ou absoluto (a interna pode até pode ter posição absoluta). É o exemplo em vermelho, 80% da altura da div amarela, e metade da largura.

#d1 {
  background:yellow;
  width:50vw;
  height:80vh;
}

#d2 {
  background:red;
  height:80%;
  width:50%;
}
<div id="d1">
  <div id="d2">
  </div>
</div>

adicionou 29 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando
Post restaurado por Largato
Post removido por Largato
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando