Come posso conservare due div side-by lato alla stessa altezza?

Question

Ho due div fianco a fianco. Vorrei che l'altezza di loro fosse la stessa e rimanesse lo stesso se si ridimensiona uno di loro. Non riesco a capire questo però. Idee?

Per chiarire la mia domanda confusa, vorrei che entrambe le scatole abbiano sempre le stesse dimensioni, quindi se si cresce perché il testo è posizionato in essa, l'altro dovrebbe crescere per abbinare l'altezza.

<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 è una singola dichiarazione:

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

Possono essere richiesti prefissi per i browser più vecchi, vedere Supporto browser.

Answer 2

Questo è un problema comune che molti hanno incontrato, ma per fortuna alcune menti intelligenti come Ed Eliot è sul suo blog hanno pubblicato le loro soluzioni online.

Fondamentalmente quello che fai è fare sia Div/Colonne molto alto aggiungendo un padding-bottom: 100% e poi "ingannare il browser" nel pensare che non sono così alti usando margin-bottom: -100%. È meglio spiegato da Ed Eliot sul suo blog, che include anche molti esempi.

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

Questa è un'area in cui CSS non ha mai avuto soluzioni: stai utilizzando <table> tag (o fingerli usando il CSS display:table* valori), poiché questo è l'unico posto in cui è stato implementato un "mantenere un mucchio di elementi della stessa altezza".

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

Funziona in tutte le versioni di Firefox, Chrome e Safari, Opera della versione 8 e in IE dalla versione 8.

Answer 4

Usando jQuery

Usando jQuery, puoi farlo in una scrittura a una linea super semplice.

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

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

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

Usando CSS

Questo è un po 'più interessante. La tecnica si chiama Colonne finte. Più o meno non imposti effettivamente il effettivo altezza per essere la stessa, ma si stringono alcuni elementi grafici in modo che loro Guarda la stessa altezza.

Answer 5

Sono sorpreso che nessuno abbia menzionato la tecnica delle colonne assolute (molto antica ma affidabile):http://24ways.org/2008/absolute-columns/

Secondo me, è di gran lunga superiore alle colonne finte e alla tecnica di un vero layout.

L'idea generale è che un elemento con position: absolute; posizionerà contro l'elemento genitore più vicino che ha position: relative;. Quindi allunghi una colonna per riempire l'altezza del 100% assegnando entrambi top: 0px; e bottom: 0px; (o qualunque pixel/percentuali di cui hai effettivamente bisogno.) Ecco un esempio:

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

È possibile utilizzare il plug -in Heights di JQuery per realizzare, questi plugin rendono tutta la divisione della stessa altezza dell'altra. Se uno di loro cresce e anche l'altro crescerà.

Qui un campione di implementazione

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.

Ecco il link

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

Answer 7

Potresti usare Colonne finte.

Fondamentalmente utilizza un'immagine di sfondo in un Div contenente per simulare i due divs uguali. L'uso di questa tecnica ti consente anche di aggiungere ombre, angoli arrotondati, bordi personalizzati o altri motivi funky ai tuoi contenitori.

Funziona solo con scatole a larghezza fissa.

Ben testato e funzionante correttamente in ogni browser.

Answer 8

Ho appena individuato questo thread mentre cercavo proprio questa risposta. Ho appena fatto una piccola funzione jQuery, spero che questo aiuti, funzioni come un fascino:

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 9

Questa domanda è stata posta 6 anni fa, ma è ancora degno di dare una semplice risposta con Flexbox Layout al giorno d'oggi.

Basta aggiungere il seguente CSS al padre <div>, Funzionerà.

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

Le prime due righe dichiarano che verranno visualizzate come Flexbox. E flex-direction: row Dice ai browser che i suoi figli verranno visualizzati nelle colonne. E align-items: stretch soddisferà il requisito che tutti gli elementi dei bambini si estenderanno alla stessa altezza che uno di loro diventa più alto.

Answer 10

Se non ti dispiace uno dei divè un maestro e dettare l'altezza per entrambi divs c'è questo:

Violino

Non importa cosa, il div A destra si espanderà o schiaccia e lo strafiggerà per abbinare l'altezza del div sulla sinistra.

Tutti e due divS Deve essere figli immediati di un contenitore e devono specificare le loro larghezze al suo interno.

CSS rilevante:

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

Mi piace usare gli elementi di pseudo per raggiungere questo obiettivo. Puoi usarlo come sfondo del contenuto e lasciarli riempire lo spazio.

Con questi approccio è possibile impostare margini tra colonne, bordi, ecc.

.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

La griglia CSS

Il modo moderno di farlo (che evita anche di dover dichiarare a <div class="row"></div>-Wrapper intorno a due articoli) sarebbe quello di utilizzare una griglia CSS. Questo ti dà anche un facile controllo sulle lacune tra le righe/colonne dell'articolo.

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

Ho provato quasi tutti i metodi menzionati sopra, ma la soluzione Flexbox non funzionerà correttamente con Safari e i metodi di layout della griglia non funzionano correttamente con le versioni precedenti di IE.

Questa soluzione si adatta a tutti gli schermi ed è compatibile con il browser:

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

Il metodo sopra eguagliarà l'altezza delle celle e per gli schermi più piccoli come il cellulare o il tablet, possiamo usare il @media Metodo menzionato sopra.

Answer 14

Puoi usare jQuery per raggiungerlo 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>

Dovrai includere jQuery

Answer 15

So che è passato molto tempo, ma condivido comunque la mia soluzione. Questo è un trucco 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 16

Il Violino

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 17

Questo è un plug -in jQuery che imposta l'altezza uguale per tutti gli elementi sulla stessa riga (controllando l'offset.top dell'elemento). Quindi, se l'array jQuery contiene elementi di più di una riga (offset diverso.top), ogni riga avrà un'altezza separata, in base all'elemento con altezza massima su quella riga.

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 18

    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 19

Stavo avendo lo stesso problema, quindi ho creato questa piccola funzione usando jQuery poiché jQuery fa parte di ogni applicazione Web al giorno d'oggi.

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

Puoi chiamare questa funzione sul pagina Evento pronto

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

Spero che questo funzioni per te.

Answer 20

Di recente mi sono imbattuto in questo e non mi sono piaciute molto le soluzioni, quindi ho provato a sperimentare.

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

Answer 21

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

Quello che ho fatto qui è cambiare l'altezza in Min-Height e gli ha dato un valore fisso. Se uno di loro viene ridimensionato, l'altro rimarrà alla stessa altezza. Non sono sicuro se questo è quello che vuoi