web-dev-qa-db-fra.com

Comment puis-je garder deux divs côte à côte de la même hauteur?

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

Pour clarifier ma question confuse, je voudrais que les deux cases soient toujours de la même taille. Ainsi, si l’une grandit parce que du texte y est placé, l’autre doit être agrandie à 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>
htmlcsscss3html-tableflexbox
402
NibblyPig

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 support du navigateur .

536
Pavlo

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

Fondamentalement, ce que vous faites est de rendre les deux divs/colonnes très très grands en ajoutant un padding-bottom: 100% puis en "trompant le navigateur" en leur faisant croire qu'ils ne sont pas " t-il si haut en utilisant margin-bottom: -100%. Ed Eliot l'explique mieux sur son blog, qui inclut é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>
143
mqchen

C’est un domaine dans lequel CSS n’a jamais vraiment trouvé de solution - vous devez utiliser les balises <table> (ou les simuler à l’aide des valeurs CSS display:table*), car c’est le seul endroit où une tas d’éléments de même hauteur "a été mis 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.

53
Paul D. Waite

Utiliser Javascript

en utilisant jQuery, vous pouvez le faire dans un script très simple d'une ligne.

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

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

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

Utiliser CSS

C'est un peu plus intéressant. La technique s'appelle Faux Columns . Plus ou moins, vous ne définissez pas réellement la hauteur réelle comme étant identique, mais vous configurez certains éléments graphiques afin qu'ils regarde la même hauteur.

38
Derek Adair

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 technique de Faux Columns et de One True Layout.

L'idée générale est qu'un élément avec position: absolute; se positionne par rapport à l'élément parent le plus proche qui a position: relative;. Vous étirez ensuite une colonne pour remplir 100% de la hauteur en attribuant un top: 0px; et un bottom: 0px; (ou le nombre de 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>
16
geofflee

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

Voici un exemple de mise en oeuvre

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/

11
Starx

Vous pouvez utiliser Faux Columns .

Fondamentalement, il utilise une image d'arrière-plan dans une DIV contenant pour simuler les deux DIV de même 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 qu'avec les boîtes de largeur fixe cependant.

Bien testé et fonctionne correctement dans tous les navigateurs.

8
Arve Systad

Je viens de repérer ce fil tout en cherchant cette réponse. Je viens de faire une petite fonction jQuery, espérons 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>
6
Mike Wells

Cette question a été posée il y a 6 ans, mais il est toujours digne de donner une réponse simple avec flexbox layout de nos jours.

Il suffit d’ajouter le code 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é sous forme de flexbox. Et flex-direction: row indique aux navigateurs que ses enfants seront affichés en colonnes. Et align-items: stretch répondra à l'exigence voulant que tous les éléments enfants s'étirent à la même hauteur que l'un d'eux plus haut.

4
Hegwin

Si vous ne craignez pas que l'un des divs soit un maître et dicte la hauteur pour les deux divs, il y a ceci:

Fiddle

Quoi qu'il en soit, la div à droite s'agrandira ou s'installera et le débordement correspondra à la hauteur de la div à gauche.

Les deux divs doivent être les enfants immédiats d'un conteneur et doivent spécifier leur largeur.

CSS pertinentes:

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

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>
2
Adrian Menendez

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 présentation de la grille ne fonctionneront pas correctement avec les anciennes versions d'Internet Explorer.

Cette solution est compatible avec 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 équivaudra à la hauteur des cellules et, pour les écrans plus petits tels que mobile ou tablette, nous pouvons utiliser la méthode @media mentionnée ci-dessus.

1
Jodyshop

Le chemin de la grille CSS

La manière moderne de procéder (ce qui évite également de déclarer un <div class="row"></div>- autour de tous les deux éléments) consisterait à utiliser une grille CSS. Cela vous permet également de contrôler facilement les espaces entre vos lignes/colonnes d’éléments.

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

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

0
pixeltocode

Je sais que ça fait longtemps mais je partage quand même ma solution. C'est un truc 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>
0
Roy Vincent

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