Come posso mantenere due div affiancati alla stessa altezza?

442

Ho due div fianco a fianco. Vorrei che l'altezza fosse la stessa e che rimanessi uguale se uno di loro si ridimensionasse. Non riesco a capirlo però. Idee?

Per chiarire la mia domanda confusa, vorrei che entrambe le caselle avessero sempre le stesse dimensioni, quindi se una cresce perché il testo è inserito in essa, l'altra dovrebbe crescere per adattarsi all'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>
Espandi frammento

html  css  html-table  flexbox 
— NibblyPig
fonte
Vuoi che se uno di loro sta diventando più grande, l'altro rimarrà della stessa altezza?
— Wai Wong,
Un esempio che non è una soluzione ma che si trova in un ambiente modificabile è disponibile qui: jsfiddle.net/PCJUQ
— MvanGeest
— C. Hare

Risposte:

592

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

I prefissi potrebbero essere richiesti per i browser più vecchi, consultare il supporto del browser .

— Pavlo
fonte
17
Flexbox ha funzionato come un fascino. Se stai sviluppando un design reattivo e vuoi che il tuo secondo div scenda su schermi più piccoli, dovrai impostare .row per visualizzare: block; nella tua query multimediale.
— Nick Zulu,
7
@NickZulu Credo che in questo caso dovresti impostare flex-direction: column: jsfiddle.net/sdsgW/1
— Pavlo
1
@Eckstein non è richiesto per entrambe le soluzioni. Guarda le demo.
— Pavlo,
3
questo non ha funzionato per me fino a quando non ho aggiunto l'altezza: 100%; alle colonne dei bambini
— Jacob Raccuia,
1
È possibile fare in modo che un div div specifico determini l'altezza dell'altro? In modo che se il contenuto di un altro div bambino sta cambiando, non può cambiare l'altezza di quel div specifico
— Narek Malkhasyan
149

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

Fondamentalmente quello che fai è rendere entrambi div / colonne molto alti aggiungendo un padding-bottom: 100%e quindi "ingannare il browser" nel pensare che non siano 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>
Espandi frammento

— lambda
fonte
1
La spiegazione su One True Layout è stata un po 'scarsa, ma dopo aver controllato il primo link l'ho implementato bene da uno degli esempi che ha usato. Tuttavia è davvero male perché devi usare un'immagine per rappresentare il bordo inferiore delle colonne ed è dubbio per il supporto cross-browser. Tuttavia funziona e non si basa su JavaScript, quindi lo segnerò come corretto. Grazie!
— NibblyPig,
Questo non sembra funzionare nei vecchi browser IE (sì, sfortunatamente devo ancora supportare IE6). Un modo per renderlo compatibile?
— Strongriley,
1
@strongriley Acquista il blog di Ed Eliot: ejeliot.com/blog/61 Dovrebbe funzionare in IE6. Forse il problema è causato altrove?
— mqchen
1
Questo si interrompe se la finestra è troppo stretta e i div sono posizionati uno sotto l'altro.
— WhyNotHugo
1
Come si definisce il riempimento di celle che si desidera effettivamente presenti nella cella della tabella, ad esempio padding: 7px 10pxse la padding-bottomproprietà è impostata al 100%? (PS è overflow:hiddenstato richiesto anche per me sul row)
— user1063287
55

Questa è un'area in cui i CSS non hanno mai avuto soluzioni - stai usando i <table>tag (o fingendoli usando i display:table*valori CSS ), in quanto è l'unico posto dove è stato implementato un "mantenere un gruppo 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 almeno dalla versione 8 e in IE dalla versione 8.

— Paul D. Waite
fonte
5
Questa soluzione non è disponibile per coloro che devono supportare IE6 / IE7, ma credo che sia la più pulita.
— twsaef,
2
questa risposta è PERFETTA! solo un piccolo promemoria: potrebbe accadere che alcuni client richiedano "table" anziché "table-row"
— tiborka
@ user2025810: aw, grazie. Sai quali clienti richiedono tableinvece di table-row?
— Paul D. Waite,
@ user2025810: yikes, non posso dire di averlo mai provato :) Buono a sapersi però, evviva. (Dato il suo focus PDF, scommetto che supporta alcune delle funzionalità relative alla stampa di CSS 2.1 che non sono implementate molto bene nei browser.)
— Paul D. Waite,
7
Con questa soluzione, dimentica di usare la percentuale widthper i tuoi div, a meno che tu non aggiunga display: tablel'elemento genitore, che rovinerà le cose.
— Alex G,
42

Utilizzando jQuery

Usando jQuery, puoi farlo in un semplicissimo script a una riga.

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

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

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

Utilizzando CSS

Questo è un po 'più interessante. La tecnica si chiama Faux Columns . Più o meno non imposti l' altezza effettiva in modo che sia la stessa, ma imposti alcuni elementi grafici in modo che appaiano alla stessa altezza.

— Derek Adair
fonte
Penso che usare JavaScript sia un ottimo metodo. Il problema è che cade a pezzi se disabilitato. Penso che lo userò comunque e costruirò la migliore contingenza possibile ;-) Grazie!
— Nicorellius,
13
Ciò implica che l'altezza di columnOne è sempre maggiore della colonna Two.
— Sébastien Richer,
1
È necessario confrontare l'altezza delle colonne prima di applicare l'altezza per esse. Penso che js sia il metodo migliore per questo problema, quasi tutti i browser sono js abilitati, in caso contrario, dovrebbero uscire dal tuo sito Web e da molti altri siti Web.
— SalmanShariati,
6
Funzionerà anche solo quando la pagina viene caricata per la prima volta. Se la finestra viene quindi ridimensionata, causando il ridimensionamento dei div, non rimarranno sincronizzati
— ikariw,
16

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

Secondo me, è di gran lunga superiore sia alla Faux Columns che alla tecnica di One True Layout.

L'idea generale è che un elemento con position: absolute;verrà posizionato rispetto all'elemento genitore più vicino che ha position: relative;. Quindi allunghi una colonna per riempire l'altezza del 100% assegnando sia a top: 0px;che bottom: 0px;(o qualsiasi pixel / percentuale effettivamente necessario). 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>
— geofflee
fonte
1
Se la colonna di destra ha più righe di quella di sinistra, il contenuto è overflow.
— David,
11

È possibile utilizzare il plug-in Equal Heights di Jquery per ottenere questo risultato, che rende tutti i div esattamente della stessa altezza degli altri. Se uno di loro cresce e anche l'altro cresce.

Ecco un esempio 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/

— Starx
fonte
8

È possibile utilizzare le colonne finte .

Fondamentalmente usa un'immagine di sfondo in un DIV contenente per simulare i due DIV di uguale altezza. 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.

— Arve Systad
fonte
7

Ho appena notato questa discussione mentre cercavo questa risposta. Ho appena creato una piccola funzione jQuery, spero che questo aiuti, funziona come un incantesimo:

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
fonte
1
Ho usato outerHeight per includere imbottitura e bordi. Questa è la soluzione più pulita che penso.
— Sébastien Richer,
Soluzione perfetta che stavo cercando. Altre soluzioni sono valide nel caso in cui una riga abbia alcune colonne, ma questo approccio è migliore per contenuti HTML complessi. Piccola aggiunta: quando il documento viene ridimensionato in una pagina reattiva, l'altezza del contenuto non cambia a causa della correzione. Quindi, ho aggiunto $ ('. Inner'). Css ({height: "iniziale"}); prima di "ogni funzione" per impostare l'altezza sul valore predefinito.
— bafsar
5

La via della griglia CSS

Il modo moderno di farlo (che evita anche di dichiarare un <div class="row"></div>wrapper ogni due elementi) sarebbe quello di utilizzare una griglia CSS. Questo ti dà anche un facile controllo sugli spazi tra le righe / colonne del tuo 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>
Espandi frammento

— connexo
fonte
4

Questa domanda è stata posta 6 anni fa, ma è ancora degno dare una risposta semplice con il layout di flexbox 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 verrà visualizzato come flexbox. E flex-direction: rowdice ai browser che i suoi figli verranno visualizzati in colonne. E align-items: stretchsoddisferà il requisito che tutti gli elementi dei bambini si allungheranno alla stessa altezza con cui uno di essi diventerà più alto.

— Hegwin
fonte
1
@TylerH Ma chiesto ha modificato la sua domanda e ha aggiunto 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.che non è menzionato nella risposta accettata ... Ho appena completato qui. Forse avrei dovuto commentarlo sulla risposta accettata?
— Hegwin,
1
non è menzionato esplicitamente perché è già coperto dalla semplice dichiarazione CSS. Apri lo snippet della risposta a schermo intero e ridimensiona la finestra del browser per visualizzarla; rimangono le stesse dimensioni l'uno dell'altro.
— TylerH,
1
Anche se la risposta accettata utilizza flexbox, questa ha un approccio diverso. align-items: stretch è ciò che mi ha messo sulla strada per risolvere il mio problema in una situazione molto particolare.
— BenoitLussier,
Il align-items: stretch;flex non è predefinito?
— madav,
3

Utilizzando CSS Flexbox e altezza minima ha funzionato per me

inserisci qui la descrizione dell'immagine

Supponi di avere un container con due div all'interno e desideri che questi due div abbiano la stessa altezza.

Dovresti impostare " display: flex " sul contenitore e " align-items: stretch "

Quindi dai ai subacquei un ' altezza minima ' del 100%

Vedi il codice qui sotto

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

— RealMJDev
fonte
2

Se non ti dispiace che uno dei due divsia un maestro e che determini l'altezza per entrambi div, c'è questo:

Violino

Indipendentemente da ciò, la divdestra si espanderà o si schiaccerà e strariperà per corrispondere all'altezza della divsinistra.

Entrambi divdevono essere figli immediati di un contenitore e devono specificare le loro larghezze al suo interno.

CSS pertinente:

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

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

Con questo approccio puoi impostare i 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>
Espandi frammento

— Adrian Menendez
fonte
1

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;            
}
— drjorgepolanco
fonte
1

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

Questa soluzione è adatta a tutti gli schermi ed è compatibile con più 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 sarà uguale all'altezza delle celle e per gli schermi più piccoli come dispositivi mobili o tablet, possiamo usare il @mediametodo sopra menzionato.

— Jodyshop
fonte
0

puoi usare jQuery per farlo 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>

Devi includere jQuery

— pixeltocode
fonte
1
Questo non funzionerà se entrambi <div>hanno contenuti dinamici. Il motivo per cui dico è se <div class="right">hanno più contenuti dell'altro problema.
— Surya,
0

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

Questo è un plugin jQuery che imposta l'altezza uguale per tutti gli elementi sulla stessa riga (controllando offset.top dell'elemento). Pertanto, se l'array jQuery contiene elementi di più di una riga (offset.top diverso), ogni riga avrà un'altezza separata, basata sull'elemento con l'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] );

}

};

— Déján Kőàdić
fonte
-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
fonte
1
Fornisci eventuali commenti alla tua risposta.
— sgnsajgon,
-2

Avevo lo stesso problema, quindi ho creato questa piccola funzione usando jquery poiché jquery è 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'
            });
        });
    }
}

È possibile chiamare questa funzione all'evento pronto per la pagina

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

Spero che questo funzioni per te.

— Programmatore principale
fonte
-3

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

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

— tushar747
fonte
-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>

Quello che ho fatto qui è stato modificare l'altezza in altezza minima e dargli un valore fisso. se uno di essi viene ridimensionato, l'altro rimarrà alla stessa altezza. non sono sicuro se questo è quello che vuoi

— Wai Wong
fonte
L'OP voleva che i div avessero sempre la stessa altezza.
— Simon Forsberg,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.