Como eu alcanço divs de altura iguais (lado a lado) com HTML / CSS?

Eu tenho dois divs dentro de um contêiner. Um à esquerda, outro à direita, lado a lado. Como posso fazer com que cada um tenha a mesma altura, mesmo que eles tenham conteúdo diferente?

Por exemplo, o direito div tem um monte de conteúdo e é o dobro da altura da div esquerda, como faço o div esquerdo estender para a mesma altura da div direita?

Existe algum código JavaScript (jQuery) para fazer isso?

Você poderia usar o jQuery, mas existem maneiras melhores de fazer isso.

Esse tipo de pergunta surge muito e geralmente há 3 respostas …

1. Use CSS

Esta é a melhor maneira de fazê-lo, pois é a abordagem mais pura semanticamente (sem recorrer ao JS, que tem seus próprios problemas). A melhor maneira é usar o display: table-cell e valores relacionados. Você também pode tentar usar a técnica de fundo falso (que você pode fazer com gradientes CSS3).

2. Use Tabelas

Isso parece funcionar muito bem, mas às custas de ter um layout não-visual. Você também causará agitação com os puristas. Eu evitei usar tabelas, e você também deveria.

3. Use jQuery / JavaScript

Isso se beneficia em ter a maioria das marcações semânticas, exceto com o JS desativado, você não obterá o efeito desejado.

Aqui está uma maneira de fazer isso com CSS puro, no entanto, como você notará no exemplo (que funciona no IE 7 e no Firefox), as bordas podem ser difíceis – mas não são impossíveis, então tudo depende do que você deseja Faz. Este exemplo pressupõe uma estrutura CSS bastante comum de body> wrapper> content container> coluna 1 e coluna 2.

A chave é a margem inferior e seu preenchimento de cancelamento.

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    Equal Height Columns    

I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.

I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.

 

For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?

 

Is there some JavaScript (jQuery) code to accomplish this?

Isto é o que parece:

insira a descrição da imagem aqui

você pode trabalhar com js:

  

Eu já vi muitas tentativas para fazer isso, embora nenhum tenha atendido às minhas necessidades de TOC. Talvez seja necessário dedicar um segundo para entender isso, embora seja melhor do que usar JavaScript.

Desvantagens conhecidas:

  • Não suporta várias linhas de elementos no caso de um contêiner com largura dinâmica.
  • Não funciona no IE6.

A base:

layout base

  • vermelho é o recipiente (auxiliar) que você usaria para definir a margem do conteúdo.
  • verde é position: relative; overflow: hidden position: relative; overflow: hidden e (opcionalmente, se você deseja que as colunas sejam centralizadas) text-align: center; font-size: 0; line-height: 0; text-align: center; font-size: 0; line-height: 0;
  • display: block; float: left; azul display: block; float: left; display: block; float: left; ou (opcionalmente, se você deseja que as colunas sejam centralizadas) display: inline-block; vertical-align: top; display: inline-block; vertical-align: top;

Até agora nada fora do comum. Seja qual for o conteúdo que o elemento azul tenha, você precisa adicionar um elemento absolutamente posicionado ( amarelo ; observe que o z-index desse elemento deve ser menor que o conteúdo real da checkbox azul) com esse elemento e o top: 0; bottom: 0; top: 0; bottom: 0; (não defina a posição esquerda ou direita).

base com absoluto

Todos os seus elementos agora têm altura igual. Para a maioria dos layouts, isso já é suficiente. Meu cenário precisa ter conteúdo dynamic seguido por um conteúdo estático, em que o conteúdo estático deve estar na mesma linha.

insira a descrição da imagem aqui

Para conseguir isso, você precisa adicionar eq de padding-bottom ( verde escuro ) ao conteúdo de altura fixa aos elementos azuis .

insira a descrição da imagem aqui

Em seguida, dentro dos elementos amarelos , crie outro elemento absolutamente posicionado ( left: 0; bottom: 0; ) ( azul escuro ).

insira a descrição da imagem aqui

Supostamente, se essas checkboxs ( amarelo ) tivessem que ser hiperlinks ativos e você tivesse algum estilo que desejasse aplicar nas checkboxs azuis originais, você usaria o seletor irmão adjacente:

 yellow:hover + blue {} 

Aqui está um código e uma demonstração :

HTML:

 

SCSS / MENOS:

 #products { ul { position: relative; overflow: hidden; text-align: center; font-size: 0; line-height: 0; padding: 0; margin: 0; li { display: inline-block; vertical-align: top; width: 130px; padding: 0 0 130px 0; margin: 0; } } li { a { display: block; position: absolute; width: 130px; background: rgba(255,0,0,.5); z-index: 3; top: 0; bottom: 0; .icon-product { background: #ccc; width: 90px; height: 90px; position: absolute; left: 20px; bottom: 20px; } .name { opacity: 1; } } .name { position: relative; margin: 20px 10px 0; font-size: 14px; line-height: 18px; opacity: 0; } a:hover { background: #ddd; text-decoration: none; .icon-product { background: #333; } } } } 

Observe que a demonstração está usando uma solução alternativa que envolve duplicação de dados para corrigir o z-index . Alternativamente, você poderia usar pointer-events: none e whatever solution for IE.

aqui é uma solução muito simples com um display css curto: table

 
Aside
Here's the aside content
Content
geht's pellentesque wurscht elementum semper tellus s'guelt Pfourtz !. gal hopla
TIP : Just clic on this block to add/remove some text

aqui é css

 #main { display: table; width: 100%; } #aside, #content { display: table-cell; padding: 5px; } #aside { background: none repeat scroll 0 0 #333333; width: 250px; } #content { background: none repeat scroll 0 0 #E69B00; } 

é assim

insira a descrição da imagem aqui

Bem, eu não faço uma tonelada de jQuery, mas no mundo CSS / Javascript eu usaria apenas o modelo de object e escreveria uma declaração da seguinte forma:

 if(leftDiv.style.height > rightDive.style.height) rightDiv.style.height = leftDiv.style.height; else leftDiv.style.height = rightDiv.style.height) 

Há também um plugin do jQuery chamado equalHeights que eu usei com algum sucesso.

Eu não tenho certeza se o que estou usando é o do grupo de filamentos mencionado acima, ou se este é o primeiro resultado do google … De qualquer maneira, um plugin jquery é provavelmente a maneira mais fácil e flexível de ir.

Use isso na function pronta do documento jquery. Considerando que existem dois divs com ids “left” e “right”.

 var heightR = $("#right").height(); var heightL = $("#left").height(); if(heightL > heightR){ $("#right").css({ height: heightL}); } else { $("#left").css({ height: heightR}); } 

Embora muitos não concordem com o uso do javascript para esse tipo de coisa, aqui está um método que usei para obter isso usando apenas o javascript:

 var rightHeight = document.getElementById('right').clientHeight; var leftHeight = document.getElementById('left').clientHeight; if (leftHeight > rightHeight) { document.getElementById('right').style.height=leftHeight+'px'; } else { document.getElementById('left').style.height=rightHeight+'px'; } 

Com “left” e “right” sendo o id das duas tags div.

Isto é o que eu uso em javascript simples:

Parece muito, mas é muito simples!

 function equalizeHeights(elements){ //elements as array of elements (obtain like this: [document.getElementById("domElementId"),document.getElementById("anotherDomElementId")] var heights = []; for (var i=0;i max) { maxIndex = i; max = arr[i]; } } return maxIndex; } 

Eu concordo com a resposta inicial, mas a solução JS com o método equal_heights () não funciona em algumas situações, imagine que você tenha produtos próximos uns dos outros. Se você fosse aplicá-lo somente ao contêiner pai, eles terão a mesma altura, mas as seções de nome do produto poderão ser diferentes se uma delas não couber em duas linhas. É aqui que eu sugiro usar abaixo

https://jsfiddle.net/0hdtLfy5/3/

 function make_children_same_height(element_parent, child_elements) { for (i = 0; i < child_elements.length; i++) { var tallest = 0; var an_element = child_elements[i]; $(element_parent).children(an_element).each(function() { // using outer height since that includes the border and padding if(tallest < $(this).outerHeight() ){ tallest = $(this).outerHeight(); } }); tallest = tallest+1; // some weird shit going on with half a pixel or something in FF and IE9, no time to figure out now, sowwy, hence adding 1 px $(element_parent).children(an_element).each(function() { $(this).css('min-height',tallest+'px'); }); } }