Fazer Div acompanhar altura de outra :Div menu lateral e div conteúdo

Aender · Julho 22, 2012

Boa tarde pessoal .Estou com uma dúvida aqui em relação à layout CSS talvez não seja tão complicado, mas não estou conseguindo resolver o problema.É o seguinte, estou criando um layout simples CSS , basicamente existe uma div central e dentro dela as demais Divs: topo,menu esquerdo , conteúdo e rodapé .Meu problema é o seguinte ,a Div conteúdo terá alturas diferenets de acordo com a página que será chamada, eu gostaria de fazer a Div menu acompanhar a altura da Div conteúdo, assim div menu e conteúdo terão sempre a mesma altura.Segue um layout de exemplo :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Mauricio Samy Silva" />
<title>Layout CSS com duas colunas - Exemplo 10</title>
<style type="text/css">
body{
margin:10px 15px;
font: 12px Arial, Helvetica, sans-serif;
background:#ffe;
text-align:center;
}
#tudo {
width:760px;
background: url(faux-bg.gif) repeat-y 0 0;
text-align:left;
margin:0 auto;
}
#topo {	
height:80px;
background-color:#df7ddf;
}

#principal {
width:578px;
background-color:#9cf;
float:right;
}
#navegacao {
width:180px;
background-color:#ffbe7d;
float:left;
}
#principal * {
padding: 0 20px;
}
#navegacao * {
padding: 0 8px;
}
#rodape {	
clear:both;
height:20px;
background-color:#b5daa2;
}

</style>

</head>
<body>
<h2 style="text-align:left;"> </h2>
<div id="tudo">
 <div id="topo">TOPO</div>
<div id="principal">CONTEÚDO
 <p>Ut enim ad minim veniam, eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua. In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Excepteur sint occaecat ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Ut enim ad minim veniam, ullamco laboris nisi in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Ut labore et dolore magna aliqua. Quis nostrud exercitation velit esse cillum dolore consectetur adipisicing elit. Excepteur sint occaecat duis aute irure dolor sed do eiusmod tempor incididunt. Mollit anim id est laborum. In reprehenderit in voluptate ut enim ad minim veniam, cupidatat non proident. Eu fugiat nulla pariatur. Velit esse cillum dolore lorem ipsum dolor sit amet, ut labore et dolore magna aliqua. Ut enim ad minim veniam, consectetur adipisicing elit. Sed do eiusmod tempor incididunt consectetur adipisicing elit, lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, mollit anim id est laborum. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi ut enim ad minim veniam, eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate cupidatat non proident. Sed do eiusmod tempor incididunt sunt in culpa mollit anim id est laborum. Ut enim ad minim veniam. Duis aute irure dolor consectetur adipisicing elit, excepteur sint occaecat. Cupidatat non proident, sunt in culpa sed do eiusmod tempor incididunt. Qui officia deserunt in reprehenderit in voluptate eu fugiat nulla pariatur. Quis nostrud exercitation ut enim ad minim veniam, sed do eiusmod tempor incididunt. Cupidatat non proident, in reprehenderit in voluptate mollit anim id est laborum. Velit esse cillum dolore lorem ipsum dolor sit amet. Consectetur adipisicing elit, ullamco laboris nisi velit esse cillum dolore. Excepteur sint occaecat duis aute irure dolor sunt in culpa. Qui officia deserunt ut enim ad minim veniam, eu fugiat nulla pariatur. Cupidatat non proident, lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt. Excepteur sint occaecat in reprehenderit in voluptate ut labore et dolore magna aliqua. Quis nostrud exercitation mollit anim id est laborum. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, sed do eiusmod tempor incididunt qui officia deserunt. Ut labore et dolore magna aliqua. Duis aute irure dolor quis nostrud exercitation lorem ipsum dolor sit amet. Ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt ullamco laboris nisi velit esse cillum dolore. Ut labore et dolore magna aliqua. Mollit anim id est laborum. Quis nostrud exercitation eu fugiat nulla pariatur. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Velit esse cillum dolore lorem ipsum dolor sit amet, sunt in culpa. Sed </p>
</div>
<div id="navegacao">MENU
 <p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
</div>
<div id="rodape">RODAPE</div>
</div>

</body>
</html>

Nesse exemplo, a div conteúdo possui altura maior e a div menu não está acompanhando essa altura, daí fica um layout bem estranho. Desde já obrigado pessoal.

crf_h0m3r · Julho 23, 2012

Você pode definir uma altura mínima (min-height) para o menu e para o conteúdo. Mesmo que eles tenham pouco conteúdo, uma altura mínima é definida.

André do Vale · Julho 23, 2012

Fiz um exemplo utilizando javascript bem simples:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
display: inline-block;
width: 800px;
background: pink;
}
#esquerda {
width: 200px;
background: yellow;
float: left;
}
#direita {
width: 590px;
float: right;
background: orange;
height:800px;
}
</style>
</head>

<body>
<div class="container">
<div id="esquerda">
	Lorem ipsum
</div>
<div id="direita">
	Lorem ipsum
</div>
</div>
<script type="text/javascript">
var altura = document.getElementById('direita').offsetHeight;
document.getElementById('esquerda').style.height = altura + 'px';
</script>
</body>
</html>

Veja se ajuda. :thumbsup:

Aender · Julho 23, 2012

Fiz um exemplo utilizando javascript bem simples:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
display: inline-block;
width: 800px;
background: pink;
}
.........

Veja se ajuda. :thumbsup:

André Campos valeu pela ajuda Brother seu código funcionou beleza mas no meu caso está dando um problema , a Div conteúdo vai receber dentro dela outras divs , essas sim é que serão as páginas , estou usando o esquema de ajax/Jquery para chamar as páginas dentro dessa Div conteúdo dinamicamente , aí nesse caso não funcionou,quando chamo as páginas dentro da Div conteúdo essa div tem sua altura almentada , mas a div menu continua com a mesma altura. Com a Div conteúdo estática, sem receber as páginas dentro dela funciona beleza.De qualquer forma valeu parceiro , se você souber resolver esse problema me dá mais uma ajudinha por gentileza. Abraço.

André do Vale · Julho 24, 2012

Cara, isso até dá pra fazer sim com javascript. Mas como é seu layout? Pois dependendo, é mais fácil resolver a situação com algum tipo de "coluna falsa". Tem uns 5 métodos diferentes em CSS que pode ajudar, levando em consideração o layout, claro.

<!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=utf-8" />
<title>Teste</title>
<style type="text/css">
.container {
display: table-row;
width: 800px;
background: pink;
}
#esquerda {
width: 200px;
background: yellow;
display: table-cell;
height: 100%;
vertical-align: top;
}
#direita {
width: 600px;
float: right;
background: orange;
height:800px;
display: table-cell;
vertical-align: top;
}
</style>
</head>

<body>
<div class="container">
<div id="esquerda">
	Lorem ipsum
</div>
<div id="direita" onresize="alerta()">
	Lorem ipsum
</div>
</div>
</body>
</html>

Há como nos mostrar uma prévia do layout em si (imagens)?

Aender · Julho 24, 2012

Cara, isso até dá pra fazer sim com javascript. Mas como é seu layout? Pois dependendo, é mais fácil resolver a situação com algum tipo de "coluna falsa". Tem uns 5 métodos diferentes em CSS que pode ajudar, levando em consideração o layout, claro.

<!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=utf-8" />
<title>Teste</title>
<style type="text/css">
.container {
display: table-row;
width: 800px;
background: pink;
}
#esquerda {
width: 200px;
background: yellow;
display: table-cell;
height: 100%;
vertical-align: top;
}
#direita {
width: 600px;
float: right;
background: orange;
height:800px;
display: table-cell;
vertical-align: top;
}
</style>
</head>

<body>
<div class="container">
<div id="esquerda">
	Lorem ipsum
</div>
<div id="direita" onresize="alerta()">
	Lorem ipsum
</div>
</div>
</body>
</html>

Há como nos mostrar uma prévia do layout em si (imagens)?

O Layout é esse que está na imagem ,as Divs topo, menu e conteúdo estão dentro de outra div : container . A div conteúdo tem uma altura mínima, dentro dela vai abrir as páginas que terão alturas diferentes .A altura da Div Conteúdo aumenta, mas a Div menu continua igual .Você está correto mesmo, talvez uma solução usando colunas falsas seria mais viável, eu vi alguns exemplos na net, vou tentar alguns pra ver se dá certo.Mais uma vez obrigado Brother.Abraço

Entrar

Arquivado

Fazer Div acompanhar altura de outra :Div menu lateral e div conteúdo

Recommended Posts

Aender 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

crf_h0m3r 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aender 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aender 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante