Comment conserver deux divisions côte à côte de la même hauteur?

J’ai deux div côte à côte. J’aimerais que leur hauteur soit la même, et restz 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, je voudrais que les deux boîtes soient toujours de la même taille, donc si l’on grandit parce que le texte y est placé, l’autre devrait croître pour correspondre à la hauteur.

Some content!
Some content!
Some content!
Some content!
Some content!
Some content!

Flexbox

Avec flexbox, c’est une déclaration unique:

 .row { display: flex; /* equal height of the children */ } .col { flex: 1; /* additionally, equal width */ padding: 1em; border: solid; } 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
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.

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.

En gros, ce que vous faites est de faire en sorte que les deux colonnes / colonnes soient très grandes en ajoutant un padding-bottom: 100% puis “inciter le navigateur” à penser qu’elles ne sont pas si grandes 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%; } 
 
Some content!
Some content!
Some content!
Some content!
Some content!
Something

C’est un domaine où CSS n’a jamais vraiment eu de solutions – vous devez utiliser les balises

(ou les imiter à l’aide de l’ display:table* CSS display:table* valeurs de display:table* ), car c’est le seul endroit où un “garde un tas d’éléments la même hauteur »a été mise en œuvre.

 
Some content!
Some content!
Some content!
Some content!
Some content!
Some content!

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

Utiliser Javascript

en utilisant jQuery, vous pouvez le faire dans un script simple ligne super simple.

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

En utilisant CSS

C’est un peu plus intéressant. La technique s’appelle Faux Colonnes . Plus ou moins vous ne définissez pas la hauteur réelle comme étant la même, mais vous montez certains éléments graphiques pour qu’ils aient la même hauteur.

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

À mon avis, il est de loin supérieur à la technique de Faux Colonnes et de One True Layout.

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 la position: relative; . Vous étirez ensuite une colonne pour remplir 100% de hauteur en atsortingbuant à la fois un top: 0px; et en bottom: 0px; (ou quels que soient les pixels / pourcentages dont vous avez réellement besoin.) Voici un exemple:

       
  • Foo
  • Bar
  • Baz
Lorem ipsum

Vous pouvez utiliser le plug-in Equal Heights de Jquery pour réaliser ce plugin, ce qui rend toutes les div de la même hauteur que les autres. Si l’un d’eux grandit et que 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 de fausses colonnes .

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

Ne fonctionne qu’avec des boîtiers à largeur fixe.

Bien testé et fonctionnant correctement dans chaque navigateur.

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

 
Content in here
More content in here

Cette question a été posée il y a 6 ans, mais il est toujours intéressant de donner une réponse simple avec la mise en page Flexbox de nos jours.

Ajoutez simplement le CSS suivant au père

, cela fonctionnera.

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

Les deux premières lignes déclarent qu’elles seront affichées en 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’étendent à la même hauteur si l’un d’eux devient plus haut.

Si cela ne vous dérange pas, une des div est un maître et dicte la hauteur pour les deux div :

Violon

Quoi qu’il en soit, le div à droite s’étendra ou se pliera et débordera pour correspondre à la hauteur du div de gauche.

Les deux div s doivent être des enfants immédiats d’un conteneur et doivent en spécifier la largeur.

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

J’aime utiliser des pseudo elements 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%; } 
 
Content Content Content Content Content Content Content Content Content
Other

La grid de CSS

La façon moderne de le faire (ce qui évite également de devoir déclarer un

-wrapper autour de deux éléments) consisterait à utiliser une grid CSS. Cela vous permet également de contrôler facilement les écarts entre les lignes / colonnes de votre article.

 .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%; } 
 
1
1.1
1.1.1
2
3 3.1
4
5
1.1
1.1.1
6 6.1
7
8
9
1.1
1.1.1
10
11 11.1
12

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

  

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.

Lorem ipsum dolor sit amet.

Vous devrez inclure jQuery

Le violon

HTML

 

Hello Kitty!

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!

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!

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

Je sais que ça fait longtemps mais je partage ma solution quand même. Ceci est une astuce jQuery.

— HTML

 
asd asd
asd
asd
asd
asd asd
asd

—- CSS

  

— JQUERY

   

Ceci est 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 provenant de plusieurs lignes (offset.top différent), 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, donc j’ai créé cette petite fonction en utilisant jquery car jquery fait partie de chaque application 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 un é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 cette question et n’aimais pas vraiment les solutions, alors j’ai essayé d’expérimenter.

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

 
Some content!
Some content!
Some content!
Some content!
Some content!
Some content!

Ce que j’ai fait ici est de changer la hauteur en min-hauteur et de lui donner une valeur fixe. si l’un d’eux se redimensionne, l’autre restra à la même hauteur. Je ne sais pas si c’est ce que vous voulez