Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Artur Loco

[Resolvido] Problemas com DIV na vertical

Por , em Desenvolvimento frontend

Recommended Posts

Artur Loco    0

Artur Loco
Postado

A situação é a seguinte:

 

Criei uma DIV com 100% de altura e está funcionando corretamente. Dentro desta, crei duas outras DIVS ( A e B ) com 50% de altura cada. O problema é: As DIVS A e B que estão com 50% não funcionam, ou melhor, suas alturas não são exibidas como deveriam.

 

Alguém teria uma dica(sem o uso de tabelas) para resolver essa?

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5" />
<title>Untitled Document</title>


<style type="text/css">
html {height: 100%;}
body {margin:0; padding:0; height:100%;}
#conteudo {
min-height:100%;
height:auto;
background-color: #F00;
width: 300px;
}
#a {
min-height:50%;
height:auto;
background-color: #FF0;
width: 300px;
}
#b {
min-height:50%;
height:auto;
background-color: #0F0;
width: 300px;
}
/* Para Internet Explorer */
* html #conteudo {height:100%;}
</style>
</head>

<body>
<div id="conteudo">

<div id="a">teste A</div>
<div id="b">teste B</div>
</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

GRiLLo    11

GRiLLo
Postado

bom, não testei em outros navegadores, só no chrome, mas assim rodou de boa aqui.

 

html {height: 100%;}
body {margin:0; padding:0; height:100%;}
#conteudo {
       min-height:100%;
       height:100%;
       background-color: #F00;
       width: 300px;
}
#a {
       height:50%;
       background-color: #FF0;
       width: 300px;
}
#b {
       height:50%;
       background-color: #0F0;
       width: 300px;
}

/* Para Internet Explorer */
* html #conteudo {height:100%;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Athur Loco,

 

O código do GRiLLo esta funcionando no Chromes, Firefox e IE8.

Realizei uma pequena alteração no id conteudo(#conteudo), pois estava redundante as seguintes propriedades, "min-height" e "height".

 

html {height: 100%;}
body {margin:0; padding:0; height:100%;}
#conteudo {
       height:100%;
       background-color: #F00;
       width: 300px;
}
#a {
       height:50%;
       background-color: #FF0;
       width: 300px;
}
#b {
       height:50%;
       background-color: #0F0;
       width: 300px;
}

/* Para Internet Explorer */
* html #conteudo {height:100%;}

 

Sucesso!

Abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito