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



10 Answers

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>

html css css3 html-table flexbox

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>




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.




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/




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>



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



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>




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



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

}

};




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.




<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






Related