8

Estou com um problema que creio eu ser fácil, mas não consigo entender como resolver.

Tenho uma estrutura do tipo:

 <div class="conteudo">
     <div class="esquerda">
     </div>
     <div class="direita">
     </div>
     <div class="clear">
     </div>
 </div>

Bom, o CSS é bem simples, a classe esquerda possui float: left, a direita possui float: right, e a clear o clear:both;

Até ai tudo bem, o problema é, o conteudo das divs, na verdade o da direita, é dinâmico, então o que acontece é que a div esquerda nao acompanha a altura da da direita, e o background que eu aplico fica só na altura ocupada pelo conteudo da div esquerda, deixando o layout totalmente errado.

Alguém saberia uma solução para isso? Parece-me que tem que se recorrer a js para isso?

1

4 Respostas 4

6

Uma solução seria utilizar o display table na div pai e display table-cell nos flhos, veja o css:

.conteudo {
    display:table;
    width:auto;  
}

.esquerda {
    display: table-cell;
    vertical-align: top;
    width: 200px;
    background-color:#ccc;
}

.direita {
    display: table-cell;
    vertical-align: top;
    width: 200px;
    background-color:#ff0000;
    color:#fff;
}

.clear {
    clear: both;
}

Mas isso vai depender de como você quer o resultado final. Por exemplo, não podemos utilizar o float:right na div da direita.
Veja aqui o resultado: http://jsfiddle.net/Q2ZH2/

Caso não seja suficiente, procure no google sobre a técnica do Faux-columns ou Equal Height Columns.

Utilizando Jquery também é possível.
Aproveitando a solução do @Sergio abaixo:

$(windows).load(function(){
    $('.esquerda').height($('.direita').height());
});

Utilizei o windows load porque assim garantimos que todos os elementos do DOM foram carregados, caso contrário a função "height" retornaria 0.

7
  • Muito obrigado Filipe, infelizmente estas duas técnicas não se aplicam tão facilmente ao layout, pois as duas colunas tem tamanhos variáveis, uma hora é uma, outra hora pode ser a outra. A Faux-columns falha rapidamente nisto, pois para ela funcionar precisamos de uma com tamanho mínimo o tempo todo. A display table até funcionou, mas quebrou um pouco o layout. Ele colocou um "padding-top" que não aparece no box model do chrome development tools na div da direita, =[, não encontro o CSS na lista que está pondo isto (e nem vou ver pois se tivesse estaria aparecendo no box model.) 17/05/2014 às 15:00
  • padding-top onde? nas divs citadas acima? 17/05/2014 às 15:02
  • Não diretamente filipe, tipo, a estrutura é semelhante, e o mesmo colocou esse padding na div direita. Eu tirei o float left e right das duas divs, e tentei tirando e deixando o clear (que nao faz diferença), mas ele sempre poe na div da direita. 17/05/2014 às 15:10
  • Ele poe o padding de 12px que mandei na div da direita, mas na pratica ele exibe um padding top MUITO maior, sendo que no box model aparece apenas os 12px; 17/05/2014 às 15:14
  • @user2752929 edita o scripr aqui: jsfiddle.net/Q2ZH2 no menu no topo tens o botão update. Após salvar, vai gerar um novo link, coloca aqui esse novo link para ver qual o problema. 17/05/2014 às 15:18
4

Na verdade não há necessidade de js.

Use estruturas de blocos e colunas para organizar.

.block{
height:auto;
float:left;
clear:both;
display:block;
}
.column {
height:auto;
float:left;
clear:none;
display:inline-block
}

Use estas classes para dar bloco e coluna para seus elementos e uma segunda classe para dar a largura e altura se for este o caso. Com esse tipo de estrutura em blocos e tendo um container para as colunas, o seu bloco que segura as colunas irá assumir a altura da maior coluna garantindo o alinhamento.

Prefira dar alinhamento a esquerda para evitar fazer fix para o IE

2

Eu acredito que a solução aqui passa por display: table / table-row / table-cell como o @Filipe referiu.

Porém, para completar as respostas e porque o jQuery está nas tags, aqui fica uma sugestão com jQuery. Neste código que você apresenta existe só uma div .esquerda e uma div .direita. Se forem mais, o meu código tem de ser adaptado para algo como isto (link). Mas como está na pergunta basta assim:

http://jsfiddle.net/zYx87/

$('.esquerda').height($('.direita').height());

Se o seu conteúdo for adicionado dinamicamente, a única opção que me ocorre com Javascript/jQuery é ter um setInterval que procura mudanças de tamanho na div .direita e faz a div .esquerda ficar do mesmo tamanho. Em termos de performance não é o mais indicado, mas funciona.

http://jsfiddle.net/zYx87/2/

var $direita = $('.direita');
var alturaInicial = 0;
$direita.on('resize change', function () {
    $('.esquerda').height($(this).height());
});

setInterval(function () {
    var novaAltura = $direita.height();
    if (alturaInicial != novaAltura) $direita.resize();
    alturaInicial = novaAltura;
}, 100);
2
  • Ele pode utilizar o $(windows).load() e após isso verificar qual div é maior, esquerda ou direita e aplicar a solução que você escreveu acima sem utilizar o setInterval. Caso o conteúdo seja adicionado via ajax, poderá inserir o código acima no "done", sem a necessidade do setInterval. 18/05/2014 às 14:02
  • @Filipe concordo. Respondi assim por falta de informação na pergunta...
    – Sergio
    18/05/2014 às 15:20
2

Uma sugestão com flex seria usar assim:

.pai {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

.pai > .coluna-1, .pai > .coluna-2 {
    width: 50%;
}

.pai > .coluna-1 {
     background: #f00;
}

.pai > .coluna-2 {
     background: #fc0;
}
<div class="pai">
     <div class="coluna-1">foo bar</div>
     <div class="coluna-2">
     foo baz<br> foo baz<br> foo baz<br> foo baz<br> foo baz<br>
     </div>
</div>

É necessário o elemento pai, as propriedades são para navegadores mais antigos, como Androids antigos e IE10/IE11:

display: -ms-flex;
display: -webkit-flex;

Pode colocar quantas colunas quiser, basta ajustar o width em porcentagem se baseando na quantidade de colunas.

Claro que isto para navegadores que suportem flex, então depende do seu projeto, pode conferir no caniuse os navegadores que fazem uso do suporte básico do flex:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .