Comment pourrais-je forcer une DIV flottante à correspondre à la hauteur d’une autre DIV flottante?

Mon code HTML ne fait que diviser les pages en deux colonnes, respectivement 65% et 35%.

Dans la response div , j’ai des données variables; dans la note div , j’ai des données fixes. Même si les deux div ont deux jeux de données différents, il me faut les afficher à la même hauteur pour que les couleurs d’arrière-plan semblent remplir les deux. Naturellement, le problème réside dans la response div , car sa hauteur varie en fonction de la quantité de données actuellement affichée.

Comment puis-je m’assurer que la hauteur des deux colonnes est toujours égale?

Enveloppez-les dans un div contenant avec la couleur d’arrière-plan qui lui est appliquée et ayez un div après les colonnes.

 
column a
column b

Mis à jour pour répondre à certains commentaires et mes propres pensées:

Cette méthode fonctionne parce que c’est essentiellement une simplification de votre problème, dans cette méthode quelque peu “oldskool” je mets deux colonnes suivies par un élément de clearing vide, le travail de l’élément clearing est de dire au parent (avec le background) que c’est ici le comportement flottant se termine, cela permet au parent de rendre essentiellement 0 pixel de hauteur à la position du clear, ce qui sera quel que soit l’élément flottant précédent le plus élevé.

La raison en est que l’élément parent est aussi grand que la plus grande colonne, l’arrière-plan est ensuite défini sur le parent pour donner l’impression que les deux colonnes ont la même hauteur.

Il convient de noter que cette technique est “oldskool” car le meilleur choix est de déclencher ce comportement de calcul de hauteur avec quelque chose comme clearfix ou en ayant simplement un débordement: caché sur l’élément parent.

Bien que cela fonctionne dans ce scénario limité, si vous souhaitez que chaque colonne ait une apparence différente ou ait un écart entre elles, alors définir un arrière-plan sur l’élément parent ne fonctionnera pas, mais il existe cependant une astuce pour obtenir cet effet.

L’astuce consiste à append un remplissage de base à toutes les colonnes, à la taille maximale que vous attendez qui pourrait être la différence entre la colonne la plus courte et la plus grande, si vous ne pouvez pas résoudre ce problème, vous devez append une marge inférieure négative du même nombre.

Vous aurez besoin d’un débordement caché sur l’object parent, mais chaque colonne demandera de rendre cette hauteur supplémentaire suggérée par la marge, mais ne demandera pas réellement la mise en page de cette taille (car la marge négative compense le calcul).

Cela rendra le parent à la taille de la colonne la plus grande, tout en permettant à toutes les colonnes de rendre à leur hauteur + la taille du remplissage inférieur utilisé. Si cette hauteur est plus grande que le parent, le rest sera simplement coupé.

 
column a
column a
column b

Vous pouvez voir un exemple de cette technique sur le site Web de bowers et wilkins (voir les quatre images du projecteur horizontal au bas de la page).

Si vous essayez de forcer un div flottant à correspondre à un autre pour créer un effet de colonne, c’est ce que je fais. J’aime ça parce que c’est simple et propre.

 
column a
column b
Line 2
Line 3
Line 4
Line 5
Column C

Je pense que cela a du sens. Cela semble bien fonctionner même avec du contenu dynamic.

Voici un plugin jQuery pour définir les hauteurs de plusieurs divs identiques. Et ci-dessous est le code réel du plugin.

 $.fn.equalHeights = function(px) { $(this).each(function(){ var currentTallest = 0; $(this).children().each(function(i){ if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } }); if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified // for ie6, set height since min-height isn't supported if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); } $(this).children().css({'min-height': currentTallest}); }); return this; }; 

La solution correcte à ce problème consiste à utiliser display: table-cell

Important: cette solution n’a pas besoin de float car la table-cell transforme déjà le div en un élément qui s’aligne avec les autres dans le même conteneur. Cela signifie également que vous n’avez pas à vous soucier de nettoyer les flotteurs, le débordement, l’arrière-plan et toutes les autres mauvaises sursockets que le hameçon apporte à la fête.

CSS:

 .container { display: table; } .column { display: table-cell; width: 100px; } 

HTML:

 
Column 1.
Column 2 is a bit longer.
Column 3 is longer with lots of text in it.

En relation:

  • jsfiddle
  • Utiliser CSS “display: table-cell” pour les colonnes

Vous devriez les envelopper dans un div sans flotteur.

 
Response with two lines
single line note

J’utilise également le correctif clearfix ici http://www.webtoolkit.info/css-clearfix.html

Je n’arrive pas à comprendre pourquoi ce problème est résolu lorsque, en 30 secondes, vous pouvez coder un tableau à deux colonnes et résoudre le problème.

Ce problème de hauteur de colonne div apparaît partout dans une mise en page typique. Pourquoi avoir recours au script quand une ancienne balise HTML simple le fera? À moins qu’il y ait des tables énormes et nombreuses sur une mise en page, je n’achète pas l’argument selon lequel les tables sont nettement plus lentes.

Flex le fait par défaut.

 

CSS:

 #flex{display:flex} #response{width:65%} #note{width:35%} 

https://jsfiddle.net/784pnojq/1/

BONUS: plusieurs lignes

https://jsfiddle.net/784pnojq/2/

Je vous recommande de les envelopper dans une division externe avec la couleur de fond désirée.

Vous pouvez toujours utiliser une image d’arrière-plan pour le faire également. J’ai tendance à voter pour cette option dans 100% des cas car la seule autre solution parfaite est l’option Jquery.

Comme pour l’utilisation de la div externe avec une couleur d’arrière-plan, le contenu des deux divs doit atteindre la même hauteur.

Ce code vous permettra d’avoir un nombre variable de lignes (avec un nombre variable de DIV sur chaque ligne) et cela fera que toutes les DIV de chaque ligne correspondent à la hauteur de son plus grand voisin:

Si nous supposons que toutes les DIV, qui flottent, se trouvent dans un conteneur avec l’ id “divContainer”, vous pouvez utiliser les éléments suivants:

 $(document).ready(function() { var currentTallest = 0; var currentRowStart = 0; var rowDivs = new Array(); $('div#divContainer div').each(function(index) { if(currentRowStart != $(this).position().top) { // we just came to a new row. Set all the heights on the completed row for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest); // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = $(this).position().top; currentTallest = $(this).height(); rowDivs.push($(this)); } else { // another div on the current row. Add it to the list and check if it's taller rowDivs.push($(this)); currentTallest = (currentTallest < $(this).height()) ? ($(this).height()) : (currentTallest); } // do the last row for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest); }); }); 

Ayant eu le même genre de problème, nécessitant trois divisions côte à côte avec un contenu différent, avec des limites droites pour les «séparer», la seule solution qui fonctionnait était une version légèrement modifiée de l’option jQuery dans une autre réponse. Rappelez-vous que vous avez également besoin du script trouvé ici .

Vous trouverez ci-dessous une version légèrement modifiée du script, qui ne permet qu’un vrai réglage de min-height (car mes boîtes devaient avoir au moins une certaine hauteur).

 /*-------------------------------------------------------------------- * JQuery Plugin: "EqualHeights" * by: Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com) * * Copyright (c) 2008 Filament Group * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php) * * Description: Compares the heights or widths of the top-level children of a provided element and sets their min-height to the tallest height (or width to widest width). Sets in em units by default if pxToEm() method is available. * Dependencies: jQuery library, pxToEm method (article: http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/) * Usage Example: $(element).equalHeights(); Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true); Optional: to specify an actual min-height (in px), pass an integer value, regardless of previous parameter: $(element).equalHeights(false,150); * Version: 2.0, 08.01.2008 --------------------------------------------------------------------*/ $.fn.equalHeights = function(px,minheightval) { $(this).each(function(){ if (minheightval != undefined) { var currentTallest = minheightval; } else { var currentTallest = 0; } $(this).children().each(function(i){ if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } }); if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //Use ems unless px is specified. // For Internet Explorer 6, set height since min-height isn't supported. if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); } $(this).children().css({'min-height': currentTallest}); }); return this; }; 

Cela fonctionne comme un charme et ne ralentit rien 🙂