J'ai deux divs côte à côte. J'aimerais que leur hauteur soit la même et reste la même si l'un d'eux redimensionne. Je ne peux pas comprendre celui-ci cependant. Des idées?

Pour clarifier ma question confuse, j'aimerais que les deux cases aient toujours la même taille, donc si l'une grandit parce que du texte y est placé, l'autre devrait grandir pour correspondre à la hauteur.

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

Flexbox

Avec flexbox, c'est une seule déclaration:

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

Des préfixes peuvent être requis pour les anciens navigateurs, voir la prise en charge des navigateurs .

C'est un problème commun que beaucoup ont rencontré, mais heureusement, certains esprits intelligents comme Ed Eliot sur son blog ont publié leurs solutions en ligne.

Fondamentalement, ce que vous faites est de rendre les deux div / colonnes très hautes en ajoutant un padding-bottom: 100%, puis "tromper le navigateur" en pensant qu'elles ne sont pas si hautes en utilisant margin-bottom: -100%. C'est mieux expliqué par Ed Eliot sur son blog, qui comprend également de nombreux exemples.

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

C'est un domaine où CSS n'a jamais vraiment eu de solutions - vous en êtes à l'utilisation de <table>balises (ou à les simuler en utilisant les display:table*valeurs CSS ), car c'est le seul endroit où un «garder un tas d'éléments de la même hauteur» a été implémenté.

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

Cela fonctionne dans toutes les versions de Firefox, Chrome et Safari, Opera à partir d'au moins la version 8 et dans IE à partir de la version 8.

Utilisation de jQuery

En utilisant jQuery, vous pouvez le faire dans un script d'une seule ligne super simple.

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

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

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

Utilisation de CSS

C'est un peu plus intéressant. La technique s'appelle les fausses colonnes . Plus ou moins que vous ne définissez pas vraiment la réelle hauteur être le même, mais vous rig quelques éléments graphiques afin qu'ils regardent la même hauteur.

Je suis surpris que personne n'ait mentionné la technique (très ancienne mais fiable) des colonnes absolues: http://24ways.org/2008/absolute-columns/

À mon avis, il est de loin supérieur à la fois aux fausses colonnes et à la technique de One True Layout.

L'idée générale est qu'un élément avec position: absolute;se positionnera par rapport à l'élément parent le plus proche position: relative;. Vous étirez ensuite une colonne pour remplir 100% de hauteur en attribuant à la fois un top: 0px;et bottom: 0px;(ou les pixels / pourcentages dont vous avez réellement besoin). Voici un exemple:

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

Vous pouvez utiliser le plugin Equal Heights de Jquery pour accomplir, ce plugin fait tous les div de même hauteur exacte que les autres. Si l'un d'eux grandit et l'autre grandira également.

Voici un exemple d'implémentation

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.

Voici le lien

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

Vous pouvez utiliser des fausses colonnes .

Fondamentalement, il utilise une image d'arrière-plan dans un DIV contenant pour simuler les deux DIV d'égale hauteur. L'utilisation de cette technique vous permet également d'ajouter des ombres, des coins arrondis, des bordures personnalisées ou d'autres motifs géniaux à vos conteneurs.

Ne fonctionne cependant qu'avec des boîtes à largeur fixe.

Bien testé et fonctionne correctement dans tous les navigateurs.

Je viens de repérer ce fil lors de la recherche de cette réponse. Je viens de faire une petite fonction jQuery, j'espère que cela aide, fonctionne comme un charme:

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>

La manière de la grille CSS

La manière moderne de le faire (qui évite également d'avoir à déclarer un <div class="row"></div>-wrapper tous les deux éléments) serait d'utiliser une grille CSS. Cela vous permet également de contrôler facilement les écarts entre vos lignes / colonnes d'articles.

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

Cette question a été posée il y a 6 ans, mais il vaut toujours la peine de donner une réponse simple avec la disposition flexbox de nos jours.

Ajoutez simplement le CSS suivant au père <div>, cela fonctionnera.

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

Les deux premières lignes déclarent qu'il sera affiché en tant que flexbox. Et flex-direction: rowindique aux navigateurs que ses enfants seront affichés en colonnes. Et align-items: stretchrépondra à l'exigence que tous les éléments enfants s'étirent à la même hauteur si l'un d'eux devient plus haut.

Utiliser CSS Flexbox et min-height a fonctionné pour moi

Supposons que vous ayez un conteneur avec deux divisions à l'intérieur et que vous souhaitiez que ces deux divisions aient la même hauteur.

Vous devez définir « display: flex » sur le conteneur ainsi que « align-items: stretch »

Ensuite, donnez à l'enfant divs une « hauteur minimale » de 100%

Voir le code ci-dessous

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

Si cela ne vous dérange pas que l'un des divs soit un maître et qu'il dicte la hauteur pour les deux, divil y a ceci:

Violon

Quoi qu'il en soit, le divbouton de droite s'agrandit ou s'ajuste et déborde pour correspondre à la hauteur dudiv côté gauche.

Tous les deux div s doivent être les enfants immédiats d'un conteneur et doivent spécifier leurs largeurs à l'intérieur.

CSS pertinents:

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

J'aime utiliser des pseudo-éléments pour y parvenir. Vous pouvez l'utiliser comme arrière-plan du contenu et les laisser remplir l'espace.

Avec cette approche, vous pouvez définir des marges entre les colonnes, les bordures, 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>

Le violon

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

J'ai essayé presque toutes les méthodes mentionnées ci-dessus, mais la solution flexbox ne fonctionnera pas correctement avec Safari et les méthodes de disposition de la grille ne fonctionneront pas correctement avec les anciennes versions d'IE.

Cette solution s'adapte à tous les écrans et est compatible avec tous les navigateurs:

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

La méthode ci-dessus égalera la hauteur des cellules, et pour les petits écrans comme les mobiles ou les tablettes, nous pouvons utiliser la @mediaméthode mentionnée ci-dessus.

vous pouvez utiliser jQuery pour y parvenir facilement.

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>

Vous devrez inclure jQuery

Je sais que ça fait longtemps mais je partage quand même ma solution. Ceci est une astuce 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>

Il s'agit d'un plugin jQuery qui définit la hauteur égale pour tous les éléments sur la même ligne (en vérifiant le offset.top de l'élément). Donc, si votre tableau jQuery contient des éléments de plus d'une ligne (différent offset.top), chaque ligne aura une hauteur séparée, basée sur l'élément avec la hauteur maximale sur cette ligne.

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

    });

J'avais le même problème alors j'ai créé cette petite fonction en utilisant jquery car jquery fait partie de toutes les applications web de nos jours.

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

Vous pouvez appeler cette fonction sur l'événement prêt pour la page

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

J'espère que cela fonctionne pour vous.

Je suis récemment tombé sur cela et je n'ai pas vraiment aimé les solutions, j'ai donc essayé d'expérimenter.

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

Ce que j'ai fait ici, c'est de changer la hauteur en min-hauteur et de lui donner une valeur fixe. si l'un d'eux est redimensionné, l'autre restera à la même hauteur. Je ne sais pas si c'est ce que tu veux