Crescimento Automatico Da Div

#1 Sky Walker

Turista

Usuários
48 posts

Sexo:Masculino
Localidade:Vargem Alegre

Posted 07/05/2010, 12:06

E ae galera ...
To iniciando no CSS, entao tenham paciencia comigo !!!
Eu tenho uma div central com apenas um background e dentro dessa div tenho outras 2 que ficaram o conteudo, preciso de que a div 1 aconpanhe o crescimento da div 2 e/ou 3 como faço isso ? se fosse ao contrario dava pra usar "height:inherit;" mais e nesse caso sera que da pra usar tipo um inherit invertido ?

Attached Files

demo.jpg 56.58KB 14 downloads

Edição feita por: Sky Walker, 07/05/2010, 12:11.

#2 Édipo Costa Rebouças

Veterano

Ex-Admins
1079 posts

Sexo:Masculino
Localidade:Brasil - São Paulo

Posted 07/05/2010, 14:07

Colega, o que você pode fazer é alguma solução por javascript, ou colocar um background com duas partes em azul na div 1 repeteindo em y. Essa técnica é conhecida como Faux Column...

#div1{ background: url(../images/fundo_faux_column.gif) repeat-y 0; }

obs: inherit não funciona no internet explorer abaixo da versão 8.

Abraço.

#3 Guilherme Texa

Novato no fórum

Usuários
11 posts

Sexo:Masculino
Localidade:Minas Gerais

Posted 07/05/2010, 14:40

Me corrigam se essa não for a melhor forma... mas estou fazendo o seguinte...

cria uma div:

<div id="div_conteudo" class="div_conteudo"> <!-- Essa é a div principal, tudo tem que estar dentro dela -->

e coloca esse CSS pra rodar...

.div_conteudo {
	padding:5px 5px 5px 5px;
	width:100%;
	min-height: 100%;
	background:#FFF;
	position: relative;
}
* .div_conteudo {
	height: 100%; /* hack para IE6 que trata height como min-height */
}

e coloca tudo dentro dela
pelo menos no meu caso está dando certo

abraços

Edição feita por: Guilherme Texa, 07/05/2010, 14:41.

#4 Édipo Costa Rebouças

Veterano

Ex-Admins
1079 posts

Sexo:Masculino
Localidade:Brasil - São Paulo

Posted 07/05/2010, 17:32

para usar height:100% vc tem que tem o elemento pai com uma altura definida

 <div id="pai">
    <div id="filho1">
    </div>
    <div id="filho2">
    </div>
 </div>

no caso do colega, não se é isso que ele quer.
Confio mais no Faux Column mas como estou deixando de dar suporte ao Internet Explorer 6, vou começar a procurar outras soluções.
Abraço.

#5 Guilherme Texa

Novato no fórum

Usuários
11 posts

Sexo:Masculino
Localidade:Minas Gerais

Posted 10/05/2010, 10:21

Édipo me da uma ajuda então... eu postei em um outro tópico mas nao obtive ajuda, meu problema é justamente o Crescimento Automático da DIV

Eu tenho uma index com 3 iframes
- TOPO
- CONTEÚDO
- RODAPE

o site está hospedado para testes
http://www.klinshop.com.br/novo

index.html

<!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-1" />
</head>

<script>
function adjustFrame(frame) { 
if (document.all) {

var w = frame.document.body.scrollWidth;
var h = frame.document.body.scrollHeight;
if(frame.document.body.scrollWidth > frame.document.body.offsetWidth) {
document.all[frame.name].height = h + 0;
}
else {
document.all[frame.name].height = h;
}

}
else if (document.getElementById) {
var w = frame.document.width;
var h = frame.document.height;
if(frame.document.body.scrollWidth > frame.document.body.offsetWidth) {
document.getElementById(frame.name).height = h + 0;
}
else {
document.getElementById(frame.name).height = h;
}
}
return false;
}
</script>

</head>

<body bgcolor="#041A2F">

<table width="776" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="297"><iframe name="topo" src="topo.html" width="950" height="400" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe></td>
</tr>
<tr>
<td valign="top"><iframe name="conteudo" id="conteudo" marginheight="0" frameborder="0" width="950" height="100%" src="home.html" scrolling="no" onload="adjustFrame(conteudo);"></iframe></td>
</tr>
<tr>
<td height="48" valign="top"><iframe name="rodape" src="rodape.html" width="950" height="107" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe></td>
</tr>
</table>
</body>
</html>

home.html

<!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-1" />
</head>

<Body bgcolor="ffffff">
<div id="div_conteudo" class="div_conteudo">
</div> 
</body>
</html>

O CSS que estou usando para deixar meu conteudo com ajuste automático é esse:

.div_conteudo {
	padding:5px 5px 5px 5px;
	width:100%;
	min-height: 100%;
	background:#FFF;
	position: relative;
}
* .div_conteudo {
	height: 100%; /* hack para IE6 que trata height como min-height */
}

No IE 8.0 eu consigo visualizar perfeitamente, mas no IE 6, IE 7 e Firefox da problema.

estou fazendo o seguinte, colocando todos o conteudo dentro de DIVs da seguinte forma:

por exemplo, se você abrir a página verá que tem os aniversariantes do mês, está dentro de uma div com esse CSS:

#niver {
	top: 402px;
	left: 190px;
	width: 244px;
	position:absolute
}

Eu percebi o seguinte, se eu mudar esse CSS para:

#niver {
	margin-top: 402px;
	margin-left: 190px;
	width: 244px;
}

Da certo, a DIV principal se ajusta até no final da DIV aniversariantes, mas se eu continuar fazendo isso para todas as páginas eu começo a ter um conflito das DIVs, e nem tudo da certo fazendo isso.

Enfim, não estou conseguindo fazer a div ficar com redimensionamento automático.

Acho que isso é coisa simples, mas estou apanhando realmente.
Se precisar de mais informações é só pedir.

Abraços

Edição feita por: Guilherme Texa, 10/05/2010, 10:30.

#6 Édipo Costa Rebouças

Veterano

Ex-Admins
1079 posts

Sexo:Masculino
Localidade:Brasil - São Paulo

Posted 10/05/2010, 12:23

Bom dia, eu não mexo com esse doctype transitional, pois o IE renderiza no quirks mode, que é bugado demais da conta, mas como vc esta usando iframes, é o correto!.

Pelo que vi rapidamente, esse JS pega o scrollHeight do iframe e da um height conforme esse valor. o que você pode fazer de mais pratico do que o CSS, é fazer um if para ver se o tamanho que você vai atribuir é menor que o minimo que você deseja, e se for menor aplicar o valor minimo.

#7 Guilherme Texa

Novato no fórum

Usuários
11 posts

Sexo:Masculino
Localidade:Minas Gerais

Posted 10/05/2010, 12:56

Bom, agradeço a atenção, mas não entendi o q vc quis dizer, aliás, entender eu até entendi, mas não dou conta de fazer... ^^

mas msm assim obrigado!

#8 Miguceamma

MiguPenjisse

Usuários
13201 posts

Posted 28/09/2017, 01:59

Levitra Generique Pas Cher cialis price Methylpredisolone Tabs Cialis Dose
Cephalexin For Cats Macrobid Where Can I Buy In Internet Doncaster cialis Reputable Suppliers Of Generic Viagra Kamagra Women Oral Jelly

#9 Miguceamma

MiguPenjisse

Usuários
13201 posts

Posted 13/10/2017, 23:09

Buy Amoxicillin In Mexico online pharmacy Cialis 20 Ml Buy 250 Mg Amoxicillin Online
Amoxicillin 250 5 Infant Dosage viagra Propecia Low Dose Atomoxetine Costs 50 Mg Viagra For Sale No Prescription
Kamagra Original Le Viagra Sur Ordonnance Canada Rx 24 viagra Order Celexa No Prescription

#10 Miguceamma

MiguPenjisse

Usuários
13201 posts

Posted 30/10/2017, 11:58

Amoxicillin Penicillin False Positive Drug Test Finasteride Natural Propecia Propaganda De Kamagra viagra Order Suhagra Online Herbolax

Attached Files

1 user(s) are reading this topic

Entrar