Comment faire pour que deux divs côte à côte aient la même hauteur ?

Question

J'ai deux divs côte à côte. J'aimerais que leur hauteur soit la même et qu'elle reste la même si l'une d'elles est redimensionnée. Mais je n'arrive pas à résoudre ce problème. Des idées ?

Pour clarifier ma question, j'aimerais que les deux boîtes aient toujours la même taille, de sorte que si l'une d'entre elles s'agrandit parce que du texte y est placé, l'autre devrait s'agrandir 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>

Answer 1

Flexbox

Avec flexbox, il s'agit d'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 nécessaires pour les navigateurs plus anciens, cf. Support du navigateur .

Answer 2

Il s'agit d'un problème courant que beaucoup ont rencontré, mais heureusement certains esprits intelligents comme Ed Eliot est sur son blog ont mis en ligne leurs solutions.

En gros, ce que vous faites, c'est que les deux divs/colonnes très haut en ajoutant un padding-bottom: 100% et ensuite "tromper le navigateur" en lui faisant croire qu'ils ne sont pas si grands en utilisant margin-bottom: -100% . Elle est mieux expliquée 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>

Answer 3

Il s'agit d'un domaine dans lequel CSS n'a jamais vraiment eu de solution. <table> (ou les simuler en utilisant les balises CSS display:table* ), car c'est le seul endroit où l'option "garder un groupe d'éléments à la même hauteur" a été mise en œuvre.

<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 de la version 8 au moins, et dans IE à partir de la version 8.

Answer 4

Utilisation de jQuery

Grâce à jQuery, vous pouvez le faire en une seule ligne de script super simplescript.

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

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

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

Utilisation de CSS

Celle-ci est un peu plus intéressante. La technique s'appelle Fausses Colonnes . Plus ou moins, vous ne définissez pas vraiment les paramètres de l'opération. réel hauteur soit la même, mais vous modifiez certains éléments graphiques pour qu'ils soient regardez la même hauteur.

Answer 5

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, elle est bien supérieure à la technique de Faux Columns et 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 qui a position: relative; . Vous pouvez ensuite étirer une colonne pour qu'elle remplisse une hauteur de 100% en assignant à la fois un top: 0px; et bottom: 0px; (ou tout autre pixel/pourcentage 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>