20 replies to this topic

[fekz]

Tenho uma div #conteudo que usa include e fica no meio, onde logicamente, é posto o conteudo.
Ela se redimensiona com o css height: auto; de acordo com o tamanho do texto.

Do lado esquerdo, tenho um menu chamado numa div #menu e do lado direito um menu chamado #direito.
Queria pegar a altura do #conteudo e deixar os 2 menus com a mesma altura, pois os 2 menus tem cor de fundo AZUL e queria que preenchesse até o fim da página, não deixando espaço em branco.

Fiz o seguinte:

function redimensiona() {
conteudo = document.getElementById('conteudo').height; // Tentei pegar o HEIGHT do conteudo.
document.getElementById('menu').style.height = 'conteudo'; // Aplicar o HEIGHT do conteudo ao MENU.
document.getElementById('direito').style.height = 'conteudo; // Aplicar o HEIGHT do conteudo ao DIREITO.
}

Alguém me ajuda a fazer este script funcionar? Outro erro é que mesmo pondo valores ali no lugar de conteudo por exemplo:
document.getElementById('direito').style.height = '2000px';
O height só funciona no FF no ie6 não.

Alguém me dá uma mão?
Valeu

[Nicholas Pufal]

fekz, dá uma olhadinha na busca antes de postar. Grande parte das vezes tua solução pode estar lá, como é o caso agora.

Retirado da busca:

Redimencionar Div De Acordo Com A Outra, Sem ter um valor inicial

Usando aquilo lá, tu consegue resolver

Qualquer coisa é só postar.

Edit: Re-lendo aqui vi que teu foco na verdade é deixar as duas divs até o final da página, e não somente deixar elas com a mesma altura. Neste caso, temos que aguardar alguém responder porque eu não me lembro de um meio de fazer isso agora aqui

Mas de qualquer forma, dá uma lida nesse link que te passei... dependendo do que você realmente quer, já ajuda...

Acho que o seu problema é mais direcionado para a seção CSS (não creio que precise de JS para isso), sendo assim vou mover para lá

Edição feita por: Firehalk, 29/07/2008, 18:04.

[fekz]

Eu acho que tem que ser como javascript sim cara. Porque com css, a div do menu por xemplo, tem um menu com 5 itens, se eu por height: auto; ele vai ficar só o tamanho do menu.
Então eu preciso que ele vá até o fim, acompanhando o conteúdo. E o da direita também.

Preciso que eles peguem o height do conteudo numa variável e apliquem as outras 2 colunas, isso é js.
Porque o conteúdo vai ser diferente em cada seção do site, portanto terá uma altura diferente.

Move pra JS de novo por favor.

Valeuuu

[Nicholas Pufal]

Ah, então pera aí que pra ser sincero não entendi exatamente o que você quer.

Queria pegar a altura do #conteudo e deixar os 2 menus com a mesma altura, pois os 2 menus tem cor de fundo AZUL e queria que preenchesse até o fim da página, não deixando espaço em branco.

Você não quer então que vá até o fim da página sempre? Quer é que o tamanho da div da esquerda, se estenda o necessário para ficar alinhado com a div da direita. E vice-versa.

É isso?

Se realmente for isso, você deu uma olhada no link que te passei? Eles falam exatamente disso lá...

Retirado da busca:

Redimencionar Div De Acordo Com A Outra, Sem ter um valor inicial

Caso não for o citado acima, mas sim que você quer que ambas as colunas sempre vão até o fundo da página em todas seções, então o local certo ainda é CSS.

Assim que isso ficar mais claro eu movo o seu tópico de volta se necessário

Nota: fundo/fim da página não depende do conteúdo. Fundo/fim da página significa se estender até a "barra de status" dos navegadores, se estendendo sempre até lá, independente do tamanho do conteúdo.

Edição feita por: Firehalk, 30/07/2008, 06:25.

[fekz]

www.fekz.co.cc/teste.php

Vamos lá.

Ali tem o menu do lado esquerdo que é a div #menu.
do outro lado, tem uma div #direito, sem nada, mas só pra acompanhar o layout.
No meio, o conteúdo, que é um include.
Se eu especificar uma height para a coluna da esquerda e da direita, e o conteúdo for grande, vai acontecer o que está acontecendo, vai ficar uma parte em branco, embaixo do menu e do direito.

Eu quero que a div #menu e a div #direito, sigam o conteúdo, que vai depender de cada include. Para isso, preciso capturar a altura da div #conteudo e aplica-la as outras 2 divs cada vez que a página for carregada pois dependendo da página, será um tamanho diferente.

Tentei:
function redimensiona() {
conteudo = document.getElementById('conteudo').offsetHeight;
document.getElementById('menu').style.height = 'conteudo';
document.getElementById('direito').style.height = 'conteudo';
}

Usei isso, mas não deu certo.
Além disso:
E se eu trocar ali document.getElementById('direito').style.height = '2000px'; funciona só no FF no IE não.

[Nicholas Pufal]

Eu realmente acredito que não precisa de Javascript para fazer isso. Eu tô meio enferrujado com CSS, mas andei lendo por alto aqui, e me lembrei mais ou menos sobre como fazer isso. É só trabalhar as medidas de altura de acordo com a div pai.

Iisto é, as divs filho da tua div pai, irão ocupar as mesmas dimensões da div pai. Ex: se a div pai aumenta 100, as divs filho aumentam também 100.

Pelo que vi no seu site, a estrutura que você quer é exatamente isso.

Ou seja, o HTML ficaria assim:

<div id="pai">

	<div id="esquerda"></div>
	<div id="meio">&nbsp;</div>
	<div id="direita"></div>

</div>

Se trabalharia com floats para chegar até o ponto que você deseja.

Fiz um exemplo aqui... Mas sem a div meio, porque para alinhar ela não me lembro bem como se faz. O exemplo é mais para ilustrar como funciona.

Trecho HTML:

<div id="main">

	<div id="esquerda">asdasdasdasd</div>
	<div id="direita">asdasdasdasd</div>

</div>

CSS:

* {
padding:0px;
margin:0px;
text-align:center;
}

#main {
margin: 0px auto;
width: 745px;
height: 123px;
border: solid 1px black;
}

#esquerda {
float:left;
background-color: #CCF;
width:200px;
height:100%;
}

#direita {
float:right;
background-color: #CCF;
width:200px;
height:100%;
}

Explicando:

1. Zerei todos os paddings e margins

2. Defini o width e o height de todas as divs. Sendo que nas que serão colunas, defini o height em 100%.

3. Nas divs que serão colunas, uma fica com float:left e outra com float:right, para o correto posicionamento dentro da div pai.


Para tu testar, pega esse código aí, e experimenta mudar o tamanho (height) da div main. Altera de 123px para qualquer outro valor.

Acho que indo por esse caminho, tu chega lá onde tu quer de forma mais correta (melhor acessibilidade do visitante) e simplificada...

Tenta procurar por "3 columns layout CSS" ou "3 colunas CSS", que tu vai achar bastante info. interessante.

Edição feita por: Firehalk, 30/07/2008, 11:57.

[fekz]

Cara não é isso.
Se fosse pra div filho herdar eu sei que 100% de height adiantaria.

<div id="tudo">
<div id="menu"> conteudo do menu </div>
<div id="conteudo"> Include php pro conteudo </div>
<div id="direito"> menu direito </div>
</div> // fecha tudo

Ou seja, não quero herdar do #tudo e sim pegar do conteúdo que não tem relação nenhuma com as duas outras.

[Nicholas Pufal]

Hm pelo que vi no teu site e pelos teus comentários, você queria estender até o fim, variando de acordo com o conteúdo. Este meu exemplo faz exatamente isso.

Se realmente não for este seu pedido, vou te pedir para fazer uma ilustração demonstrando, porque realmente ainda não entendi então...

[fekz]

Hm pelo que vi no teu site e pelos teus comentários, você queria estender até o fim, variando de acordo com o conteúdo. Este meu exemplo faz exatamente isso.

Se realmente não for este seu pedido, vou te pedir para fazer uma ilustração demonstrando, porque realmente ainda não entendi então...

Sim, quero estender o menu e o lado direito - as duas partes em azul, até o fim do conteudo, que é onde está o texto.
Acontece que a sua solução de por height: 100% nas 2 divs do lado não funciona.
Obrigado.

[Nicholas Pufal]

Você testou o exemplo que te fiz?

Não é somente height:100%. Eu vi a estrutura da tua página. Você vai ter que mudar para funcionar, conforme eu citei no meu exemplo (que você não testou... ) .

O lance de arrumar a div do meio, é só dar uma pesquisada que tu acha (só isso que faltou no exemplo).

A estrutura que tu quer alcançar, é um layout de 3 colunas normal, não tem porque complicar.

-> http://www.webproduc...lexible-layout/ (retirando o footer é exatamente o que tu quer)

-> http://www.positioni...ol.stretch.html (as dimensões estão diferentes, mas também pode ser usado como modelo)

-> http://www.pixy.cz/b...ss-3col-layout/ (clica nas palavras short, longer e very long para ter exemplos de como ele vai se comportar com mais/menos conteúdo)

Enfim, buscando por "3 column layout css" tem uma gama bem grande de exemplos

[fekz]

Você testou o exemplo que te fiz?

Não é somente height:100%. Eu vi a estrutura da tua página. Você vai ter que mudar para funcionar, conforme eu citei no meu exemplo (que você não testou... ) .

O lance de arrumar a div do meio, é só dar uma pesquisada que tu acha (só isso que faltou no exemplo).

A estrutura que tu quer alcançar, é um layout de 3 colunas normal, não tem porque complicar.

-> http://www.webproduc...lexible-layout/ (retirando o footer é exatamente o que tu quer)

-> http://www.positioni...ol.stretch.html (as dimensões estão diferentes, mas também pode ser usado como modelo)

-> http://www.pixy.cz/b...ss-3col-layout/ (clica nas palavras short, longer e very long para ter exemplos de como ele vai se comportar com mais/menos conteúdo)

Enfim, buscando por "3 column layout css" tem uma gama bem grande de exemplos

Eu sei que dá pra fazer por css mas eu teria que fazer tudo de novo.

Já consegui fazer usando javascript, vou botar no ar para você ver.
fekz.co.cc/teste.html

[Nicholas Pufal]

Hmm aqui não rolou

Firefox 3.0.1 _ Windows XP Pro

Mas imagina só... e se o visitante desabilita JS? (ou é leigo e alguém desabilitou, e ele não sabe onde mudar a opção)

A acessibilidade é muito alterada em função de fazer essas "gambi" (gambiarras). Além do que - por mais que não seja muito - você está empurrando mais trabalho para o PC do cara, pois JS é client-side. Então cada vez que o cara acessar uma seção do teu site, tu tá pedindo pro JS fazer todo aquele processo...

Eu deixaria tudo certo agora, para evitar dores de cabeça no futuro... Antigamente eu não dava muita atenção também, mas no futuro quando precisar alterar algo, é um pé no sac... Eu sei por experiência própria.

Mas enfim, faça como preferir É apenas uma dica.

[Édipo Costa Rebouças]

Você testou o exemplo que te fiz?

Não é somente height:100%. Eu vi a estrutura da tua página. Você vai ter que mudar para funcionar, conforme eu citei no meu exemplo (que você não testou... ) .

O lance de arrumar a div do meio, é só dar uma pesquisada que tu acha (só isso que faltou no exemplo).

A estrutura que tu quer alcançar, é um layout de 3 colunas normal, não tem porque complicar.

-> http://www.webproduc...lexible-layout/ (retirando o footer é exatamente o que tu quer)

-> http://www.positioni...ol.stretch.html (as dimensões estão diferentes, mas também pode ser usado como modelo)

-> http://www.pixy.cz/b...ss-3col-layout/ (clica nas palavras short, longer e very long para ter exemplos de como ele vai se comportar com mais/menos conteúdo)

Enfim, buscando por "3 column layout css" tem uma gama bem grande de exemplos

Eu sei que dá pra fazer por css mas eu teria que fazer tudo de novo.

Já consegui fazer usando javascript, vou botar no ar para você ver.
fekz.co.cc/teste.html

mas se dá pra fazer por css é bem melhor cara, se vc precisar mudar, vai ter que mexer na css e no script...

[fekz]

Hmm aqui não rolou

Firefox 3.0.1 _ Windows XP Pro

Mas imagina só... e se o visitante desabilita JS? (ou é leigo e alguém desabilitou, e ele não sabe onde mudar a opção)

A acessibilidade é muito alterada em função de fazer essas "gambi" (gambiarras). Além do que - por mais que não seja muito - você está empurrando mais trabalho para o PC do cara, pois JS é client-side. Então cada vez que o cara acessar uma seção do teu site, tu tá pedindo pro JS fazer todo aquele processo...

Eu deixaria tudo certo agora, para evitar dores de cabeça no futuro... Antigamente eu não dava muita atenção também, mas no futuro quando precisar alterar algo, é um pé no sac... Eu sei por experiência própria.

Mas enfim, faça como preferir É apenas uma dica.

Não funcionou porque eu não upei ainda.
Mas mesmo assim, não está funfando no firefox, mas valeu como experiência.

Cara, esse site: -> http://www.webproduc...lexible-layout/
é demais, muito bom mesmo... mas tá mto mal explicado... O cara manja muito, só que sei lá, não explica muito bem.
Mas achei muito bom mesmo... valeu...

Como eu disse esse layout aí era só pra teste, já achei diversas maneiras de fazer a coluna ir até o fim, como no site maujor.

Fiquei impressionado com esse webproducer, pena que não entendi direito.

[Édipo Costa Rebouças]

maninho, vc não estava perguntando isso em outro tipico, acho que tinha te respondido, e é totalmente possivel fazer tais coisas...
esse topico ficou enorme colega, você poderia pelo menos, postar a solução... para que outras pessoas aproveitem o conteudo dele de alguma forma.