¿Cómo puedo mantener dos de lado a lado divs la misma altura?

StackOverflow https://stackoverflow.com/questions/2997767

Pregunta

Tengo dos divs de lado a lado.Me gustaría la altura de ellos a ser el mismo, y la misma estancia, si uno de ellos cambia de tamaño.No puedo encontrar esta bien.Ideas?

Para aclarar mi pregunta confusa, me gustaría que ambas cajas a ser siempre el mismo tamaño, así que si uno crece, puesto que el texto se coloca en él, la otra debe 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>

¿Fue útil?

Solución

Flexbox

Con Flexbox es una sola declaración:

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

Se pueden requerir prefijos para los navegadores más antiguos, ver soporte del navegador.

Otros consejos

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

Básicamente, lo que haces es hacer tanto divs/columnas muy alto agregando un padding-bottom: 100% y luego "engañar al navegador" para que piense que no son tan altos usando margin-bottom: -100%. Es mejor explicado por Ed Eliot 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>

Esta es un área en la que CSS nunca ha tenido realmente ninguna solución: se debe a usar <table> Etiquetas (o fingirlas usando el CSS display:table* valores), ya que ese es el único lugar donde se implementó un "mantenga un montón de elementos de 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 de al menos la versión 8 y en IE de la versión 8.

Usando jQuery

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

// 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 falsas. Más o menos no establece el actual altura para ser la misma, pero se acumula algunos elementos gráficos para que ellos Mira La misma altura.

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

En mi opinión, es muy superior tanto a las columnas falsas como a la técnica de un verdadero diseño.

La idea general es que un elemento con position: absolute; posicionará contra el elemento principal más cercano que tiene position: relative;. Luego estira una columna para llenar el 100% de altura asignando ambos top: 0px; y bottom: 0px; (O cualquier 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>

Puede usar el complemento de igualdad de alturas de JQuery para lograr, estos complementos hacen que todo el DIV de la misma altura exacta que otra. 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-jqueryplugin/

Podrías usar Columnas falsas.

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

Sin embargo, solo funciona con cuadros de ancho fijo.

Bien probado y trabajando correctamente en cada navegador.

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

Esta pregunta se hizo hace 6 años, pero todavía es digno dar una respuesta simple con Flexbox Diseño hoy en día.

Solo agregue los siguientes 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: row les dice a los navegadores que sus hijos se mostrarán en columnas. Y align-items: stretch cumplirá con el requisito de que todos los elementos de los niños se estirarán a la misma altura que uno de ellos se vuelve más alto.

Si no te importa uno de los divser un maestro y dictar la altura para ambos divs hay esto:

Violín

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

Ambas cosas divS debe ser hijos inmediatos de un contenedor y tener que 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;
}

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>

La forma de la red CSS

La forma moderna de hacer esto (lo que también evita tener que declarar un <div class="row"></div>-Shipe alrededor de cada dos elementos) sería utilizar una cuadrícula CSS. Esto también le brinda un fácil control sobre los espacios entre las filas/columnas de su elemento.

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

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 la cuadrícula no funcionarán correctamente con versiones más antiguas de IE.

Esta solución se adapta a todas las pantallas y es compatible con el navegador cruzado:

.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 el móvil o la tableta, podemos usar el @media Método mencionado anteriormente.

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

Tendrás que incluir jQuery

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

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

Este es un complemento jQuery que establece la misma altura para todos los elementos en la misma fila (al verificar el elemento offset.top). Entonces, si su matriz de jQuery contiene elementos de más de una fila (diferente offset.top), cada fila tendrá una altura separada, basada en el elemento con máxima altura 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] );

}

};

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

    });

Tenía el mismo problema, así que creé esta pequeña función usando jQuery ya que jQuery es parte de cada aplicación 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 usted.

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

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

<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 la mínima altura y le dio un valor fijo. Si uno de ellos se redimensiona, el otro permanecerá de la misma altura. No estoy seguro si esto es lo que quieres

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top