441

Tengo dos divs uno al lado del otro. Me gustaría que la altura de ellos sea la misma, y que permanezca igual si uno de ellos cambia de tamaño. Sin embargo, no puedo entender esto. Ideas?

Para aclarar mi pregunta confusa, me gustaría que ambas cajas tengan siempre el mismo tamaño, por lo que si una crece porque se coloca texto en ella, la otra debería crecer para que coincida con la 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 fragmento

html css html-table flexbox NibblyPig
fuente

¿Desea que si uno de ellos se está haciendo más grande, que el otro mantenga el mismo tamaño de altura?

Wai Wong

Un ejemplo que no es una solución pero está en un entorno editable se puede encontrar aquí: jsfiddle.net/PCJUQ

MvanGeest

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

C. Hare

592

Flexbox

Con flexbox es una declaración única:

.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 fragmento

Es posible que se requieran prefijos para navegadores antiguos, consulte el soporte del navegador .

Pavlo
fuente

17

Flexbox funcionó a las mil maravillas. Si está desarrollando un diseño receptivo y desea que su segundo div baje en pantallas más pequeñas, necesitará configurar .row para mostrar: block; en su consulta de medios.

Nick Zulu

77

@NickZulu Creo que en este caso deberías configurar flex-direction: column: jsfiddle.net/sdsgW/1

Pavlo

1

@Eckstein no es necesario para ambas soluciones. Ver demos.

Pavlo

3

esto no funcionó para mí hasta que agregué altura: 100%; a las columnas de los niños

Jacob Raccuia

1

¿Es posible hacer que un elemento secundario específico determine la altura del otro? De modo que si el contenido de otro div infantil está cambiando, no puede cambiar la altura de ese div específico

Narek Malkhasyan

149

Este es un problema común que muchos han encontrado, pero afortunadamente algunas mentes inteligentes como Ed Eliot en su blog han publicado sus soluciones en línea.

Básicamente, lo que haces es hacer que ambos divs / columnas sean muy altos agregando ay padding-bottom: 100%luego "engañar al navegador" para que piense que no son tan altos usando margin-bottom: -100%. Ed Eliot lo explica mejor en su blog, que también incluye muchos ejemplos.

.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 fragmento

lambda
fuente

1

La explicación en One True Layout fue un poco pobre, pero después de verificar el primer enlace lo implementé bien a partir de uno de los ejemplos que utilizó. Sin embargo, es realmente malo porque tiene que usar una imagen para representar el borde inferior de las columnas, y es dudoso para la compatibilidad entre navegadores. Sin embargo, funciona y no se basa en JavaScript, por lo que voy a marcarlo como correcto. ¡Gracias!

NibblyPig

Esto no parece funcionar en los antiguos navegadores IE (sí, desafortunadamente todavía tengo que admitir IE6). ¿Alguna forma de hacer esto compatible?

strongriley

1

@strongriley Checkout Blog de Ed Eliot: ejeliot.com/blog/61 Debería funcionar en IE6. Tal vez el problema es causado en otro lugar?

mqchen

1

Esto se rompe si la ventana es demasiado estrecha y los divs se colocan uno debajo del otro.

WhyNotHugo

1

¿Cómo define el relleno de celda que realmente desea que esté presente en la celda de la tabla, por ejemplo padding: 7px 10px, si la padding-bottompropiedad se establece en 100%? ( overflow:hiddenTambién se requirió PS para mí en el row)

user1063287

55

Esta es un área en la que CSS nunca ha tenido realmente ninguna solución: debe usar <table>etiquetas (o falsificarlas con los display:table*valores CSS ), ya que ese es el único lugar donde se implementó un "mantener un montón de elementos a la misma altura".

<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>

Esto funciona en todas las versiones de Firefox, Chrome y Safari, Opera desde al menos la versión 8 y en IE desde la versión 8.

Paul D. Waite
fuente

55

Esta solución no está disponible para aquellos que necesitan soportar IE6 / IE7, pero creo que es la más limpia.

twsaef

2

esta respuesta es perfecta! solo un pequeño recordatorio: puede suceder que algún cliente requiera "tabla" en lugar de "fila de tabla"

tiborka

@ user2025810: aw, gracias. ¿Sabes qué clientes requieren en tablelugar de table-row?

Paul D. Waite

@ user2025810: sí, no puedo decir que haya probado en eso :) Es bueno saberlo, saludos. (Dado su enfoque en PDF, apuesto a que admite algunas de las características relacionadas con la impresión de CSS 2.1 que no se implementan muy bien en los navegadores)

Paul D. Waite

77

Con esta solución, olvídate de usar el porcentaje width para tus divs, a menos que agregues display: tableel elemento padre, lo que arruinará las cosas.

Alex G

42

Usando jQuery

Usando jQuery, puede hacerlo en un súper simple script de una línea.

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

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

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

Usando CSS

Esto es un poco más interesante. La técnica se llama columnas de imitación . Más o menos, en realidad, no establece la altura real para que sea la misma, pero arma algunos elementos gráficos para que se vean a la misma altura.

Derek Adair
fuente

Creo que usar JavaScript es un muy buen método. El problema es que se desmorona si está deshabilitado. Creo que usaré esto de todos modos y construiré la mejor contingencia que pueda; -) ¡Gracias!

nicorellius el

13

Esto implica que la altura de columnOne'S siempre es mayor que columnTwo.

Sébastien Richer

1

Debe comparar la altura de las columnas antes de aplicar la altura para ellas. Creo que js es el mejor método para este problema, casi todos los navegadores están habilitados para js, de lo contrario, deberían salir de su sitio web y de muchos otros sitios web.

SalmanShariati

66

Esto solo funcionará cuando la página se cargue por primera vez. Si la ventana se redimensiona, lo que hace que los divs cambien de tamaño, entonces no permanecerán sincronizados

ikariw

16

Me sorprende que nadie haya mencionado la técnica (muy antigua pero confiable) de columnas absolutas: http://24ways.org/2008/absolute-columns/

En mi opinión, es muy superior a la técnica de Columnas falsas y One True Layout.

La idea general es que un elemento con position: absolute;se posicionará contra el elemento padre más cercano que tenga position: relative;. Luego estira una columna para llenar el 100% de altura asignando tanto a top: 0px;como bottom: 0px;(o los píxeles / porcentajes que realmente necesite). Aquí hay un ejemplo:

<!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
fuente

1

Si la columna derecha tiene más líneas que la izquierda, el contenido se desborda.

David

11

Puede usar el complemento Equal Heights de Jquery para lograrlo, este complemento hace que todos los divisores tengan exactamente la misma altura que otros. Si uno de ellos crece y otro también crecerá.

Aquí una muestra de implementación

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 esta el link

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

Starx
fuente

8

Podrías usar columnas de imitación .

Básicamente utiliza una imagen de fondo en un DIV que contiene para simular los dos DIV de igual altura. Usar esta técnica también le permite agregar sombras, esquinas redondeadas, bordes personalizados u otros patrones originales a sus contenedores.

Sin embargo, solo funciona con cajas de ancho fijo.

Bien probado y funcionando correctamente en todos los navegadores.

Arve Systad
fuente

7

Acabo de ver este hilo mientras buscaba esta misma respuesta. Acabo de hacer una pequeña función jQuery, espero que esto ayude, funciona como un 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
fuente

1

Utilicé outsideHeight para incluir relleno y bordes. Esta es la solución más limpia, creo.

Sébastien Richer

La solución perfecta que estaba buscando. Otras soluciones son buenas para el caso de que una fila tenga algunas columnas, pero este enfoque es mejor para el contenido complejo de HTML. Pequeña adición: cuando el tamaño del documento en una página receptiva, la altura del contenido no cambia debido a la corrección. Entonces, agregué $ ('. Inner'). Css ({height: "initial"}); antes de 'cada función' para establecer la altura por defecto.

bafsar

5

La forma de cuadrícula CSS

La forma moderna de hacerlo (que también evita tener que declarar un <div class="row"></div>contenedor alrededor de cada dos elementos) sería utilizar una cuadrícula CSS. Esto también le brinda un control sencillo sobre los espacios entre las filas / columnas de sus elementos.

.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 fragmento

connexo
fuente

4

Esta pregunta se hizo hace 6 años, pero todavía vale la pena dar una respuesta simple con el diseño de flexbox hoy en día.

Simplemente agregue el siguiente CSS al padre <div>, funcionará.

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

Las dos primeras líneas declaran que se mostrará como flexbox. Y flex-direction: rowle dice a los navegadores que sus hijos se mostrarán en columnas. Y align-items: stretchcumplirá con el requisito de que todos los elementos secundarios se estiren a la misma altura si uno de ellos se vuelve más alto.

Hegwin
fuente

1

@TylerH Pero preguntó, ha editado su pregunta y ha agregado lo

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 no se menciona en la respuesta aceptada ... Acabo de completarla aquí. ¿Quizás debería haberlo comentado en la respuesta aceptada?

Hegwin el

1

no se menciona explícitamente porque ya está cubierto por la simple declaración CSS. Abra el fragmento de la respuesta en pantalla completa y cambie el tamaño de la ventana de su navegador para ver; permanecen del mismo tamaño entre sí.

TylerH

1

Incluso si la respuesta aceptada usa flexbox, esta tiene un enfoque diferente. alinear elementos: estiramiento es lo que me puso en el camino para resolver mi problema en una situación muy particular.

BenoitLussier

¿No es align-items: stretch;el valor predeterminado de flex?

madav

3

Usar CSS Flexbox y min-height me funcionó

Digamos que tiene un contenedor con dos divisiones adentro y desea que esas dos divisiones tengan la misma altura.

Establecería ' display: flex ' en el contenedor, así como ' align-items: stretch '

Luego solo dale al niño divs una ' altura mínima ' del 100%

Ver el código a continuación

.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 fragmento

RealMJDev
fuente

2

Si no le importa que uno de los divs sea un maestro y dicte la altura para ambos div, hay esto:

Violín

Pase lo que pase, el divde la derecha se expandirá o aplastará y se desbordará para que coincida con la altura del divde la izquierda.

Ambos div s deben ser hijos inmediatos de un contenedor y deben especificar sus anchos dentro de él.

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
fuente

2

Me gusta usar pseudo elementos para lograr esto. Puede usarlo como fondo del contenido y dejar que llenen el espacio.

Con este enfoque, puede establecer márgenes entre columnas, bordes, 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 fragmento

Adrian Menéndez
fuente

1

los violín

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
fuente

1

He probado casi todos los métodos mencionados anteriormente, pero la solución flexbox no funcionará correctamente con Safari, y los métodos de diseño de cuadrícula no funcionarán correctamente con versiones anteriores de IE.

Esta solución se adapta a todas las pantallas y es compatible con todos los 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;}
}

El método anterior igualará la altura de las celdas, y para las pantallas más pequeñas como dispositivos móviles o tabletas, podemos usar el @mediamétodo mencionado anteriormente.

Jodyshop
fuente

0

puedes usar jQuery para lograr esto fácilmente.

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>

Deberá incluir jQuery

pixeltocode
fuente

1

Esto no funcionará si ambos <div>tienen contenido dinámico. La razón que digo es si <div class="right">tiene más contenido que el otro problema surge.

Surya

0

Sé que ha pasado mucho tiempo, pero comparto mi solución de todos modos. Este es un truco de 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
fuente

-1

Este es un complemento jQuery que establece la altura igual para todos los elementos en la misma fila (marcando el offset.top del elemento). Entonces, si su matriz jQuery contiene elementos de más de una fila (offset.top diferente), cada fila tendrá una altura separada, basada en el elemento con la altura máxima en esa fila.

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ć
fuente

-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
fuente

1

Proporcione cualquier comentario a su respuesta.

sgnsajgon

-2

Estaba teniendo el mismo problema, así que creé esta pequeña función usando jquery ya que jquery es parte de todas las aplicaciones web hoy en día.

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'
            });
        });
    }
}

Puede llamar a esta función en el evento listo para la página

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

Espero que esto funcione para ti.

Programador maestro
fuente

-3

Recientemente me encontré con esto y realmente no me gustaron las soluciones, así que intenté experimentar.

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

tushar747
fuente

-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>

Lo que hice aquí es cambiar la altura a min-height y darle un valor fijo. Si uno de ellos se cambia de tamaño, el otro permanecerá a la misma altura. no estoy seguro si esto es lo que quieres

Wai Wong
fuente

El OP quería que los divs siempre tuvieran la misma altura.

Simon Forsberg

¿Cómo mantengo dos divisiones de lado a lado de la misma altura?

Respuestas:

Flexbox

Usando jQuery

Usando CSS

La forma de cuadrícula CSS

Usar CSS Flexbox y min-height me funcionó