441

Eu tenho dois divs lado a lado. Eu gostaria que a altura deles fosse a mesma e permanecesse a mesma se um deles fosse redimensionado. Mas não consigo descobrir isso. Ideias?

Para esclarecer minha pergunta confusa, eu gostaria que as duas caixas tivessem sempre o mesmo tamanho; portanto, se uma crescer porque o texto é colocado nela, a outra deverá crescer para corresponder à altura.

<div style="overflow: hidden">
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!
    </div>
</div>

Expandir snippet

html css html-table flexbox NibblyPig
fonte

Deseja que, se um deles estiver ficando maior, o outro permanecerá do mesmo tamanho de altura?

Wai Wong

Um exemplo que não é uma solução, mas está em um ambiente editável pode ser encontrado aqui: jsfiddle.net/PCJUQ

MvanGeest

Use javascript: stackoverflow.com/questions/3275850/…

C. Hare

591

Flexbox

Com o flexbox, é uma única declaração:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

Expandir snippet

Podem ser necessários prefixos para navegadores mais antigos, consulte o suporte ao navegador .

Pavlo
fonte

17

O flexbox funcionou como um encanto. Se você estiver desenvolvendo um design responsivo e desejar que sua segunda div caia em telas menores, será necessário definir .row para exibir: block; na sua consulta de mídia.

precisa

7

@NickZulu Eu acredito que, neste caso, você deve definir flex-direction: column: jsfiddle.net/sdsgW/1

Pavlo

1

@ Eckstein não é necessário para ambas as soluções. Veja demos.

Pavlo

3

isso não funcionou para mim até eu adicionar altura: 100%; às colunas crianças

Jacob Raccuia

1

É possível fazer com que um filho específico div determine a altura do outro? De modo que se o conteúdo de outra div criança está mudando, não pode alterar a altura do que div específica

Narek Malkhasyan

149

Este é um problema comum que muitos já encontraram, mas felizmente algumas mentes inteligentes como Ed Eliot em seu blog publicaram suas soluções on-line.

Basicamente, o que você faz é tornar as duas divs / colunas muito altas adicionando um padding-bottom: 100%e depois "enganar o navegador" para pensar que elas não são tão altas usando margin-bottom: -100%. É melhor explicado por Ed Eliot em seu blog, que também inclui muitos exemplos.

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>

Expandir snippet

lambda
fonte

1

A explicação sobre o One True Layout foi um pouco ruim, mas depois de verificar o primeiro link, eu o implementei bem a partir de um dos exemplos que ele usou. No entanto, é muito ruim porque você precisa usar uma imagem para representar a borda inferior das colunas e é duvidoso para o suporte entre navegadores. No entanto, ele funciona e não depende de javascript, então vou marcá-lo como correto. Obrigado!

NibblyPig

Isso não parece funcionar em navegadores antigos do IE (sim, infelizmente ainda tenho que dar suporte ao IE6). Alguma maneira de tornar isso compatível?

strongriley

1

@strongriley Finalize o blog de Ed Eliot: ejeliot.com/blog/61 Ele deve funcionar no IE6. Talvez o problema seja causado em outro lugar?

Mqchen

1

Isso quebra se a janela for muito estreita e os divs forem colocados um abaixo do outro.

WhyNotHugo

1

Como você define o preenchimento da célula que você realmente deseja que esteja presente na célula da tabela, por exemplo padding: 7px 10px, se a padding-bottompropriedade estiver definida como 100%? (PS overflow:hiddentambém foi necessário para me no row)

user1063287

55

Esta é uma área em que o CSS nunca teve realmente nenhuma solução - você deve usar <table>tags (ou falsificá-las usando os display:table*valores de CSS ), pois esse é o único lugar em que um “manter vários elementos da mesma altura” foi implementado.

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

Isso funciona em todas as versões do Firefox, Chrome e Safari, Opera a partir da versão 8 e no IE a partir da versão 8.

Paul D. Waite
fonte

5

Esta solução não está disponível para quem precisa oferecer suporte ao IE6 / IE7, mas acredito que seja a mais limpa.

Tw21ef 21/06

2

esta resposta é perfeita! apenas um pequeno lembrete: pode acontecer que algum cliente exige "mesa" em vez de "table-row"

tiborka

@ user2025810: ah, obrigado. Você sabe quais clientes exigem em tablevez de table-row?

Paul D. Waite

@ user2025810: caramba, não posso dizer que já testei nisso :) É bom saber, porém. (Dada a sua concentração PDF Aposto que suporta alguns dos recursos relacionados com a impressão de CSS 2.1 que não são implementadas muito bem nos navegadores.)

Paul D. Waite

7

Com esta solução - esqueça o uso de porcentagem widthpara seus divs, a menos que você adicione display: tableo elemento pai, o que atrapalhará as coisas.

Alex G

42

Usando jQuery

Usando o jQuery, você pode fazer isso em um script de uma linha super simples.

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

Usando CSS

Isso é um pouco mais interessante. A técnica é chamada Faux Columns . Mais ou menos, na verdade, você não define a altura real como a mesma, mas cria alguns elementos gráficos para que pareçam a mesma altura.

Derek Adair
fonte

Eu acho que usar JavaScript é um método muito bom. O problema é - ele desmorona se desativado. Eu acho que vou usar isso de qualquer maneira e criar a melhor contingência que puder; -) Obrigado!

22612 nicorellius

13

Isso implica que a altura da columnOne é sempre maior que a columnTwo.

Sébastien Richer

1

Você deve comparar a altura das colunas antes de aplicar a altura para elas. Eu acho que o js é o melhor método para esse problema; quase todos os navegadores são js ativados; caso contrário, eles devem sair do seu site e de muitos outros sites.

SalmanShariati

6

Isso também funcionará apenas quando a página for carregada pela primeira vez. Se a janela é redimensionada, fazendo com que os divs para redimensionar, em seguida, eles não vão ficar em sincronia

ikariw

16

Estou surpreso que ninguém tenha mencionado a técnica (muito antiga, mas confiável) de Colunas Absolutas: http://24ways.org/2008/absolute-columns/

Na minha opinião, é muito superior às técnicas de Faux Columns e One True Layout.

A ideia geral é que um elemento com position: absolute;se posicione contra o elemento pai mais próximo que o possua position: relative;. Em seguida, você estica uma coluna para preencher 100% de altura atribuindo a top: 0px;e bottom: 0px;(ou quaisquer pixels / porcentagens que você realmente precisa). Veja um exemplo:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container
      {
        position: relative;
      }

      #left-column
      {
        width: 50%;
        background-color: pink;
      }

      #right-column
      {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 50%;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <ul>
          <li>Foo</li>
          <li>Bar</li>
          <li>Baz</li>
        </ul>
      </div>
      <div id="right-column">
        Lorem ipsum
      </div>
    </div>
  </body>
</html>

geofflee
fonte

1

Se a coluna da direita tiver mais linhas que a esquerda, o conteúdo será excedido.

David

11

Você pode usar o plug-in Equal Heights do Jquery para realizar isso, esses plug-ins tornam todos os div exatamente da mesma altura que os outros. Se um deles cresce e o outro também cresce.

Aqui uma amostra de implementação

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

Aqui está o link

http://www.cssnewbie.com/equalheights-jquery-plugin/

Starx
fonte

8

Você pode usar colunas falsas .

Basicamente, ele usa uma imagem de plano de fundo em um DIV contendo para simular os dois DIVs de altura igual. O uso dessa técnica também permite adicionar sombras, cantos arredondados, bordas personalizadas ou outros padrões divertidos aos seus contêineres.

Só funciona com caixas de largura fixa.

Bem testado e funcionando corretamente em todos os navegadores.

Arve Systad
fonte

7

Apenas localizei este tópico enquanto procurava por essa resposta. Acabei de criar uma pequena função jQuery, espero que ajude, funcione como um encanto:

JAVASCRIPT

var maxHeight = 0;
$('.inner').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">
    <div class="inner">
        Content in here
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        More content in here
    </div>
</div>

Mike Wells
fonte

1

Eu usei outerHeight para incluir preenchimento e bordas. Esta é a solução mais limpa que eu acho.

Sébastien Richer

Solução perfeita que eu estava procurando. Outras soluções são boas no caso de uma linha ter algumas colunas, mas essa abordagem é melhor para conteúdo html complexo. Inclusão pequena: quando o documento é redimensionado em uma página responsiva, a altura do conteúdo não muda por causa da correção. Então, adicionei $ ('. Inner'). Css ({height: "initial"}); antes de 'cada função' para definir a altura como padrão.

bafsar

5

O caminho da grade CSS

A maneira moderna de fazer isso (que também evita ter que declarar um <div class="row"></div>-wrapper a cada dois itens) seria fazer uso de uma grade CSS. Isso também oferece controle fácil sobre as lacunas entre as linhas / colunas do item.

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.grid-item img {
  max-width: 100%;
}

<div class="grid-container">
  <div class="grid-item">1 <br />1.1<br />1.1.1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    3.1
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">5 <br />1.1<br />1.1.1</div>
  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
    6.1</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9 <br />1.1<br />1.1.1</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    11.1
  </div>
  <div class="grid-item">12</div>
</div>

Expandir snippet

connexo
fonte

4

Esta pergunta foi feita há 6 anos, mas ainda vale a pena dar uma resposta simples com o layout do flexbox atualmente.

Basta adicionar o seguinte CSS ao pai <div>, ele funcionará.

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

As duas primeiras linhas declaram que ele será exibido como flexbox. E flex-direction: rowinforma aos navegadores que seus filhos serão exibidos em colunas. E align-items: stretchatenderá ao requisito de que todos os elementos filhos se estendam para a mesma altura em que um deles se torne mais alto.

Hegwin
fonte

1

@TylerH Mas solicitado editou sua pergunta e acrescentou a

I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.

que não é mencionada na resposta aceita ... Acabei de concluir aqui. Talvez eu devesse ter comentado sobre a resposta aceita?

Hegwin 22/11

1

não é mencionado explicitamente porque já está coberto pela simples declaração CSS. Abra o Snippet da resposta em tela cheia e redimensione a janela do navegador para ver; eles permanecem do mesmo tamanho um do outro.

TylerH

1

Mesmo que a resposta aceita use flexbox, essa tem uma abordagem diferente. align-items: stretch é o que me colocou no caminho para resolver meu problema em uma situação muito particular.

BenoitLussier

O align-items: stretch;padrão do flex não é?

madav 17/09/18

3

Usar CSS Flexbox e min-height funcionaram para mim

Digamos que você tenha um contêiner com duas divs dentro e queira que essas duas divs tenham a mesma altura.

Você definiria ' display: flex ' no contêiner e também ' align-items: stretch '

Em seguida, basta dar à criança divs uma ' altura mínima ' de 100%

Veja o código abaixo

.container {
  width: 100%;
  background: linear-gradient(red,blue);
  padding: 1em;
  /* important */
  display: flex;
  /* important */
  align-items: stretch;
  justify-content: space-around;
}

.child {
  width: 100%;
  background: white;
  color: grey;
  margin: 0 .5em;
  padding: .5em;
  /* important */
  min-height: 100%;
}

<div class="container">
  
  <div class="child"><p>This is some text to fill the paragraph</p></div>
  <div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></div>
  
</div>

Expandir snippet

RealMJDev
fonte

2

Se você não se importa que um dos divs seja um mestre e dite a altura para os dois, divexiste o seguinte:

Violino

Não importa o que aconteça, a divdireita expandirá ou esmagará e transbordará para corresponder à altura da divesquerda.

Ambos divdevem ser filhos imediatos de um contêiner e precisam especificar suas larguras dentro dele.

CSS relevante:

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}

Hashbrown
fonte

2

Eu gosto de usar pseudo elementos para conseguir isso. Você pode usá-lo como plano de fundo do conteúdo e deixá-los preencher o espaço.

Com essas abordagens, você pode definir margens entre colunas, bordas etc.

.wrapper{
  position: relative;
  width: 200px;
}
.wrapper:before,
.wrapper:after{
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border: 2px solid blue;
  position: absolute;
  top: 0;
}
.wrapper:before{
  left: 0;
  background-color: red;
}
.wrapper:after{
  right: 0;
  background-color: green;
}

.div1, .div2{
  width: 40%;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.div1{
  margin-right: 20%;
}

<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>

Expandir snippet

Adrian Menendez
fonte

1

The Fiddle

HTML

<div class="container">

    <div class="left-column">

    </div>

    <div class="right-column">
        <h1>Hello Kitty!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    </div>

</div>

CSS

.container {
    float: left;
    width: 100%;
    background-color: black;
    position: relative;
    left: 0;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.left-column {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    background: wheat;
}

.right-column {
    float: right;
    width: 70%;
    position: relative;
    padding: 0;
    margin: 0;
    background: rebeccapurple;            
}

drjorgepolanco
fonte

1

Eu tentei quase todos os métodos mencionados acima, mas a solução flexbox não funcionará corretamente com o Safari e os métodos de layout de grade não funcionarão corretamente com versões mais antigas do IE.

Esta solução é adequada para todas as telas e é compatível com vários navegadores:

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

O método acima será igual à altura das células e, para telas menores como celular ou tablet, podemos usar o @mediamétodo mencionado acima.

Jodyshop
fonte

0

você pode usar o jQuery para conseguir isso facilmente.

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {
    var leftHeight = $('.left').height();
    $('.right').css({'height':leftHeight});
});

HTML

   <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
   </div>
   <div class="right">
    <p>Lorem ipsum dolor sit amet.</p>
   </div>

Você precisará incluir o jQuery

pixeltocode
fonte

1

Isso não funcionará se ambos <div>tiverem conteúdo dinâmico. A razão pela qual digo é que, se houver <div class="right">mais conteúdo, o outro problema surgirá.

Surya

0

Sei que já faz muito tempo, mas, de qualquer maneira, compartilho minha solução. Este é um truque do jQuery.

--- HTML

<div class="custom-column">
    <div class="column-left">
        asd
        asd<br/>
        asd<br/>
    </div>
    <div class="column-right">
        asd
    </div>
</div>

<div class="custom-column">
    <div class="column-left">
        asd
    </div>
    <div class="column-right">
        asd
        asd<br/>
        asd<br/>
    </div>
</div>

---- CSS

<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
    .column-left { float:left; width:25%; background:#CCC; }
    .column-right { float:right; width:75%; background:#EEE; }
</style>

--- JQUERY

<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $balancer = function() {
        $('.custom-column').each(function(){
            if($('.column-left',this).height()>$('.column-right',this).height()){
                $('.column-right',this).height($('.column-left',this).height())
            } else {
                $('.column-left',this).height($('.column-right',this).height())
            }

        });

    }
    $balancer();
    $(window).load($balancer());
    $(window).resize($balancer());

});
</script>

Roy Vincent
fonte

-1

Este é um plugin jQuery que define a mesma altura para todos os elementos na mesma linha (verificando o offset.top do elemento). Portanto, se sua matriz jQuery contiver elementos de mais de uma linha (offset.top diferente), cada linha terá uma altura separada, com base no elemento com altura máxima nessa linha.

jQuery.fn.setEqualHeight = function(){

var $elements = [], max_height = [];

jQuery(this).css( 'min-height', 0 );

// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){ 

    var offset_top = jQuery(el).offset().top;
    var el_height = jQuery(el).css('height');

    if( typeof $elements[offset_top] == "undefined" ){
        $elements[offset_top] = jQuery();
        max_height[offset_top] = 0;
    }

    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );

    if( parseInt(el_height) > parseInt(max_height[offset_top]) )
        max_height[offset_top] = el_height;

});

// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){

    if( jQuery($elements[offset_top]).length > 1 )
        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );

}

};

Déján Kőŕdić
fonte

-2

    var numexcute = 0;
    var interval;
    $(document).bind('click', function () {

        interval = setInterval(function () {
            if (numexcute >= 20) {
                clearInterval(interval);
                numexcute = 0;
            }
            $('#leftpane').css('height', 'auto');
            $('#rightpane').css('height', 'auto');
            if ($('#leftpane').height() < $('#rightpane').height())
                $('#leftpane').height($('#rightpane').height());
            if ($('#leftpane').height() > $('#rightpane').height())

                $('#rightpane').height($('#leftpane').height());
            numexcute++;
        }, 10);

    });

tcao
fonte

1

Por favor, forneça qualquer comentário à sua resposta.

precisa saber é

-2

Eu estava tendo o mesmo problema, então criei essa pequena função usando o jquery, pois o jquery faz parte de todos os aplicativos da web atualmente.

function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount > 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}

Você pode chamar esta função no evento de página pronta

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

Espero que isso funcione pra você.

Programador Mestre
fonte

-3

Recentemente me deparei com isso e realmente não gostei das soluções, então tentei experimentar.

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

tushar747
fonte

-4

<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

O que fiz aqui é alterar a altura para min-height e atribuí-lhe um valor fixo. se um deles estiver sendo redimensionado, o outro permanecerá na mesma altura. não tenho certeza se é isso que você quer

Wai Wong
fonte

O OP queria que os divs sempre tivessem a mesma altura.

Simon Forsberg

Como mantenho duas divs lado a lado da mesma altura?

Respostas:

Flexbox

Usando jQuery

Usando CSS

O caminho da grade CSS

Usar CSS Flexbox e min-height funcionaram para mim