Comment puis-je forcer un DIV flottant à correspondre à la hauteur d'un autre DIV flottant?

Question

Mon code HTML est juste divisant les pages en deux colonnes, 65%,35%, respectivement.

<div style="float : left; width :65%; height:auto;background-color:#FDD017;">
   <div id="response">
   </div> 
</div>
<div style="float : left; width :35%;height:auto; background-color:#FDD017;">
   <div id="note">
   </div>
</div>

Dans l' response div, j'ai des données de la variable; dans l' note div, j'ai fixé des données. Même si les deux divs ont deux jeux de données différents, j'ai besoin d'eux pour afficher à la même hauteur, de sorte que les couleurs d'arrière-plan semblent remplir une boîte contenant à la fois. Naturellement, le problème est l' response div, comme sa hauteur varie en fonction de la quantité de données actuellement affichées à l'intérieur.

Comment pourrais-je m'assurer que la hauteur des deux colonnes sont toujours égaux?

Answer 1

Les envelopper dans une div contenant avec la couleur d'arrière-plan est appliqué, et avoir une compensation div après les "colonnes".

<div style="background-color: yellow;">
  <div style="float: left;width: 65%;">column a</div>
  <div style="float: right;width: 35%;">column b</div>
  <div style="clear: both;"></div>
</div>

---

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

Cette méthode fonctionne parce que ses essentiellement une simplification de votre problème, dans ce peu de "oldskool" méthode " j'ai mis deux colonnes dans le suivi d'un vide de compensation de l'élément, le travail de l'élément de compensation est-à-dire la société mère (avec l'arrière-plan) c'est où flottant comportement se termine, cela permet au parent essentiellement de rendu de 0 pixels de hauteur à la position de l'claire, qui va être celui de la plus haute priorly élément flottant est.

La raison pour cela est de s'assurer de l'élément parent est aussi grand que le plus haut de la colonne, l'arrière-plan est alors mis sur le parent, pour lui donner l'apparence que les deux colonnes ont la même hauteur.

Il convient de noter que cette technique est "oldskool" parce que le meilleur choix est de déclencher cette hauteur calcul du comportement avec quelque chose comme clearfix ou simplement en ayant overflow: hidden sur l'élément parent.

Alors que cela fonctionne dans ce scénario limité, si vous le souhaitez pour chaque colonne à chercher visuellement différents, ou il y a un fossé entre eux, puis à définir un arrière-plan sur l'élément parent ne fonctionne pas, il n'y a cependant une astuce pour obtenir cet effet.

L'astuce consiste à ajouter en bas de rembourrage pour toutes les colonnes, pour le montant maximum de la taille que vous vous attendez à ce que pourrait être la différence entre la plus courte et la plus haute de la colonne, si vous ne pouvez pas faire ce travail alors choisir une grande figure, il vous faut ensuite ajouter un négatif de la marge du bas du même nombre.

Vous aurez besoin de dépassement caché sur l'objet parent, mais le résultat sera que chaque colonne va vous demander de rendre cette hauteur supplémentaire proposé par la marge, mais pas réellement de demande de mise en page de cette taille (parce que la marge négative compteurs de calcul).

Cela rendra le parent à la taille de la plus haute colonne, tout en permettant à toutes les colonnes de rendre à leur hauteur + la taille de bas de rembourrage utilisé, si cette hauteur est plus grande que la mère, puis le reste va tout simplement couper.

<div style="overflow: hidden;">
  <div style="background: blue;float: left;width: 65%;padding-bottom: 500px;margin-bottom: -500px;">column a<br />column a</div>
  <div style="background: red;float: right;width: 35%;padding-bottom: 500px;margin-bottom: -500px;">column b</div>
</div>

Vous pouvez voir un exemple de cette technique sur la bowers et wilkins site (voir horizontales quatre projecteurs d'images en bas de la page).

Answer 2

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

 <div style="background-color: #CCC; width:300px; overflow:hidden; ">
    <!-- Padding-Bottom is equal to 100% of the container's size, Margin-bottom hides everything beyond
         the container equal to the container size. This allows the column to grow with the largest
         column. -->
    <div style="float: left;width: 100px; background:yellow; padding-bottom:100%; margin-bottom:-100%;">column a</div>
    <div style="float: left;width: 100px;  background:#09F;">column b<br />Line 2<br />Line 3<br />Line 4<br />Line 5</div>
    <div style="float:left; width:100px; background: yellow; padding-bottom:100%; margin-bottom:-100%;">Column C</div>
    <div style="clear: both;"></div>
</div>
 

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

Answer 3

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

Answer 4

La bonne solution pour ce problème est d'utiliser display: table-cell

Important: Cette solution n'a pas besoin d' float depuis table-cell déjà éteint l' div dans 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 compensation de flotteurs, de dépassement, d'arrière-plan qui brille à travers et de toutes les autres mauvaises surprises que l' float hack apporte le long de la partie.

CSS:

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

HTML:

<div class="container">
    <div class="column">Column 1.</div>
    <div class="column">Column 2 is a bit longer.</div>
    <div class="column">Column 3 is longer with lots of text in it.</div>
</div>

Connexes:

• jsfiddle
• À l'aide de CSS "display: table-cell" pour les colonnes

Answer 5

Vous devriez les envelopper dans une div sans float.

 <div style="float:none;background:#FDD017;" class="clearfix">
    <div id="response" style="float:left; width:65%;">Response with two lines</div>
    <div id="note" style="float:left; width:35%;">single line note</div>
</div>
 

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