html - tag - ¿Cómo mantengo dos divs de lado a lado de la misma altura?

html title attribute

Question

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

Para aclarar mi pregunta confusa, me gustaría que ambas casillas sean siempre del mismo tamaño, por lo que si una crece porque el texto se coloca en ella, 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>

Answer 1

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>

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

Answer 2

La forma de cuadrícula CSS

La forma moderna de hacer esto (que también evita tener que declarar un <div class="row"></div> -wrapper alrededor de cada dos elementos) sería hacer uso de una cuadrícula CSS. Esto también le brinda un fácil control sobre las brechas entre las filas / columnas de sus artículos.

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

Answer 3

Usando Javascript

utilizando jQuery puedes hacerlo en un script de una línea muy 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 de imitación . Más o menos, en realidad no configuras la altura real para que sea la misma, pero arreglas algunos elementos gráficos para que se vean con la misma altura.

Answer 4

Acabo de ver este hilo mientras buscaba esta misma respuesta. Acabo de hacer una pequeña función de 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>

Answer 5

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

Answer 6

Esta es un área en la que CSS nunca ha tenido realmente ninguna solución: está dispuesto a usar etiquetas <table> (o falsificarlas con la display:table* CSS display:table* valores de la display:table* ), ya que es el único lugar donde "mantener un montón de elementos". Se implementó 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.

Answer 7

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

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

Answer 8

Este es un complemento de jQuery que establece la altura igual para todos los elementos en la misma fila (verificando 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] );

}

};

Answer 9

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 ambas divs / columnas sean muy altas al agregar un padding-bottom: 100% y luego "engañar al navegador" para que piense que no son tan altos usando el 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>

Answer 10

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

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

Answer 11

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

Con estos enfoques puedes 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>

Answer 12

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

En mi opinión, es muy superior a las dos técnicas de Faux Columns y One True Layout.

La idea general es que un elemento con position: absolute; posicionará contra el elemento padre más cercano que tenga position: relative; . Luego estira una columna para completar el 100% de altura asignando a ambos una top: 0px; y bottom: 0px; (o cualquier píxel / porcentaje 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>

Answer 13

Podrías usar columnas de Faux .

Básicamente, utiliza una imagen de fondo en un DIV que contiene para simular los dos DIV 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 cajas de ancho fijo.

Bien probado y funcionando correctamente en todos los navegadores.

Answer 14

Puedes usar el complemento Equal Heights de Jquery para lograrlo, estos complementos hacen que todos los divs tengan la misma altura que los demás. 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/

Answer 15

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>

Tendrá que incluir jQuery

Answer 16

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

Answer 17

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

Fiddle

No importa qué, el div a la derecha se expandirá o aplastará y desbordará para coincidir con la altura del div a 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;
}

Answer 18

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

Puedes llamar a esta función en evento de página preparada.

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

Espero que esto funcione para ti.

Answer 19

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

    });

Answer 20

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