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

Question

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 la hauteur d'eux même, et de rester le même si l'un d'eux se redimensionne. Je ne peux pas comprendre celui-ci cependant. Des idées?

Pour clarifier ma question confuse, j'aimerais que les deux boîtes 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.

html lang-html prettyprint-override"><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>

349

css css3 flexbox html html-table

demandé sur ndmeiri 2010-06-08 17:39:54

20 réponses

score 460 · Answer 1

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>

Les préfixes

Peuvent être requis pour les navigateurs plus anciens, voir support du navigateur .

score 137 · Answer 2

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

Fondamentalement, ce que vous faites est de rendre les deux divs / colonnes Très hauts en ajoutant un padding-bottom: 100% et ensuite "tromper le navigateur" en pensant qu'ils ne sont pas si grands en utilisant margin-bottom: -100%. Il 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>

score 54 · Answer 3

C'est un domaine où CSS n'a jamais vraiment eu de solutions - vous utilisez des balises <table> (ou les simulant en utilisant les valeurs CSS display:table*), 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.

score 34 · Answer 4

Utiliser Javascript

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

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

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

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

En utilisant CSS

C'est un peu plus intéressant. La technique est appelée fausses colonnes . Plus ou moins vous ne définissez pas réellement la hauteurréelle pour être la même, mais vous rigidifiez certains éléments graphiques de sorte qu'ils regardent la même hauteur.

score 12 · Answer 5

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

À mon avis, il est de loin supérieur aux deux fausses colonnes et à la technique D'une vraie mise en page.

L'idée générale est qu'un élément avec position: absolute; se positionnera contre l'élément parent le plus proche qui a position: relative;. Vous étirez ensuite une colonne pour remplir 100% de hauteur en assignant à la fois top: 0px; et bottom: 0px; (ou quels que soient les pixels / pourcentages que vous 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>

score 11 · Answer 6

Vous pouvez utiliser le Plugin Equal Heights de Jquery pour accomplir, ce plugins rend tous les div de la même hauteur exacte que les autres. Si l'un d'eux grandit et l'autre grandira aussi.

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/

score 8 · Answer 7

Vous pouvez utiliser fausses colonnes .

Fondamentalement, il utilise une image d'arrière-plan dans un DIV contenant pour simuler les deux DIVs de hauteur égale. 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 des boîtes à Largeur fixe.

Bien testé et fonctionne correctement dans chaque navigateur.

score 4 · Answer 8

Juste repéré ce fil en cherchant cette réponse même. 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>

score 3 · Answer 9

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 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é comme flexbox. Et flex-direction: row indique aux navigateurs que ses enfants seront affichés en colonnes. Et align-items: stretch répondra à l'exigence que tous les éléments enfants s'étendront à la même hauteur que l'un d'eux devient plus élevé.

score 2 · Answer 10

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

Violon

Quoi qu'il en soit, le div à droite se développera ou écrasera et débordera pour correspondre à la hauteur du div à gauche.

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

CSS pertinent:

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

score 2 · Answer 11

J'aime utiliser pseudo elements pour y parvenir. Vous pouvez l'utiliser comme arrière-plan du contenu et de 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>

score 1 · Answer 12

La manière de grille CSS

La façon moderne de le faire (qui évite également d'avoir à déclarer un <div class="row"></div>-wrapper autour de deux éléments) serait d'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>

score 0 · Answer 13

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 devez inclure jQuery

score 0 · Answer 14

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

score -1 · Answer 15

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

score -1 · Answer 16

Il s'agit d'un plugin jQuery qui définit la hauteur égale pour tous les éléments de la même ligne(en vérifiant le décalage de l'élément.haut). Donc, si votre tableau jQuery contient des éléments de plus d'une ligne(décalage différent.top), chaque ligne aura une hauteur séparée, basée sur l'élément avec une 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] );

}

};

score -2 · Answer 17

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

    });

score -2 · Answer 18

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

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

J'espère que cela fonctionne pour vous.

score -3 · Answer 19

Je suis récemment tombé sur ceci et n'ai pas vraiment aimé les solutions alors j'ai essayé d'expérimenter.

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

score -4 · Answer 20

<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 est de changer la hauteur en min-height et lui a donné 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 vous voulez

Las etiquetas más populares

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

20 réponses

Flexbox

Utiliser Javascript

En utilisant CSS

La manière de grille CSS