Ir para conteúdo

POWERED BY:

Arquivado

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

J.Pinheiro

[Resolvido] Ajustar DIv conforme o conteúdo

Por , em Desenvolvimento frontend

Recommended Posts

J.Pinheiro    0

J.Pinheiro
Postado

Pessoal, tenho uma DIV no centro da pagina que estou montando.

Porém não sei porque motivo ela está com tamanho fixo.

 

Eu gostaria que essa div tivesse o comportamento semelhante ao de tabelas, onde elas ajustam-se conforme o conteúdo.

 

Segue o CSS da DIV:

 

.div_content{
 alignment-adjust:central;
 alignment-baseline:central;
 width:786px;
 height:auto;
 margin:auto;
 text-align:justify;
 border-style:solid solid solid double;
 border-width: 2px 4px 3px 4px;
 padding:3px;
 border-color:#060 #666 #666 #060;
 position:relative;

}

 

O que estou fazendo errado?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Public2004    79

Public2004
Postado

Boa tarde J.Pinheiro e seja bem vindo ao fórum!

 

Se for na largura é porque você definiu um valor fixo para o elemento, veja: "width:786px;"

Utilize valores em percentual ou auto conforme o caso.

 

Att.

Compartilhar este post

Link para o post
Compartilhar em outros sites

J.Pinheiro    0

J.Pinheiro
Postado

Vlw pela resposta, esqueci mesmo de explcar.

A largura está ok, o que quero é que ela aumente a altura.

Eu tenho uma div no rodapé também, mas fiz um teste retirando a mesma e a div central aumentou como eu queria.

 

 

Porém eu gostaria que essa div aumentasse e abaixo dessa div aparecesse essa div do rodapé.

 

A div do rodapé está "travando" a div central, sabem me dizer pq?

 

E como devo fazer pra funcionar da forma que eu quero?

 

Vlw.

 

Segue o CSS da div do rodapé

 

.div_rodape{
  alignment-adjust:central;
  alignment-baseline:central;
  bottom:0;
  width:100%;
  margin:auto;
  height:100px;
  text-align:center;
  padding:10px;
  border-width:0px;
  background:url(../images/fundo_rodape.jpg);
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

J.Pinheiro    0

J.Pinheiro
Postado

To na faculdade e nao tenho acesso ao código agora, mas não é nada complexo.

 

Tenho uma div para o titulo, essa central e o rodapé no fim.

 

Mais ou menos assim:

 

<html>
<body>
<div class=div_titulo>conteudo do titulo</div>
<div class=div_content>
  	Conteudo da div que quero que aumente para ajustar ao conteudo.
Se não tiver a div de rodapé abaixo essa div comporta-se como tem que ser, aumentando conforme o conteúdo.
</div>
<div class=div_rodape>
	Essa é a div "problemática", pois se ela estiver na página ela "trava" a div acima e faz com que essa não   	expanda para ajustar ao conteúdo, fazendo com que esse conteúdo ultrapasse a borda da div.
</div>
</body>
</html>

 

O que muda obviamente é o conteudo dessas divs, mas simplificando é isso, não há nada de diferente.

Amanha eu posto todo o html, mas se isso que postei ajudar...

 

Vlw.

Compartilhar este post

Link para o post
Compartilhar em outros sites

J.Pinheiro    0

J.Pinheiro
Postado

Bom, o problema não é na DIV em si acredito, pois se não houver essa div no rodapé ela comporta-se de maneira correta, aumentando até o fim do conteúdo.

O problema está na hora que eu coloco a div do rodapé que ai essa div "trava" num ponto e a div central nao aumenta mais, fazendo o conteúdo sair para fora da mesma.

 

Você conseguiu fazer isso mesmo com a div do rodapé, usando o mesmo CSS que eu postei?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kakashi_Hatake    267

Kakashi_Hatake
Postado

Fiz algumas alterações pra ver como ficava.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testes de CSS</title>
<style type="text/css" media="all">
.div_titulo{background:#FF00FF;}
.div_content{
alignment-adjust:central;
alignment-baseline:central;
width:786px;
height:auto;
margin:0 auto;
text-align:justify;
border-style:solid solid solid double;
border-width: 2px 4px 3px 4px;
padding:3px;
border-color:#060 #666 #666 #060;
background:#FF0000;
}
.div_rodape{
alignment-adjust:central;
alignment-baseline:central;
height:100px;
text-align:center;
padding:10px;
border-width:0px;
background:#0000FF url(../images/fundo_rodape.jpg);
} 
</style>

</head>
<body>
<div class="div_titulo">conteudo do titulo</div>
<div class="div_content">
Conteudo da div que quero que aumente para ajustar ao conteudo.
Se não tiver a div de rodapé abaixo essa div comporta-se como tem que ser, aumentando conforme o conteúdo.
Conteudo da div que quero que aumente para ajustar ao conteudo.
Se não tiver a div de rodapé abaixo essa div comporta-se como tem que ser, aumentando conforme o conteúdo.
Conteudo da div que quero que aumente para ajustar ao conteudo.
Se não tiver a div de rodapé abaixo essa div comporta-se como tem que ser, aumentando conforme o conteúdo.
Conteudo da div que quero que aumente para ajustar ao conteudo.
Se não tiver a div de rodapé abaixo essa div comporta-se como tem que ser, aumentando conforme o conteúdo.
Conteudo da div que quero que aumente para ajustar ao conteudo.
Se não tiver a div de rodapé abaixo essa div comporta-se como tem que ser, aumentando conforme o conteúdo.
</div>
<div class="div_rodape">
Essa é a div "problemática"
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

J.Pinheiro    0

J.Pinheiro
Postado

Cara, consegui.

 

Vlw.

 

Comparando o teu código com o meu, eu tinha uma propriedade bottom: 0.

 

Acho que era esse o problema, pois tirei a mesma e funcionou perfeitamente.

 

Vlw.

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