web-dev-qa-db-fra.com

HTML/CSS: Création de deux div flottants de la même hauteur

J'ai un petit problème particulier que je résous actuellement en utilisant un table, voir ci-dessous. En gros, je veux que deux divs occupent 100% de la largeur disponible, mais n’occupent que l’espace vertical nécessaire (ce qui n’est pas si évident sur la photo). Les deux doivent en tout temps avoir exactement la même hauteur, avec une petite ligne entre eux, comme indiqué.

alt text http://pici.se/pictures/qJRMtoLPv.png

C’est très facile à faire avec table, ce que je suis en train de faire. Cependant, la solution ne me tient pas à cœur, car sémantiquement, il ne s’agit pas d’une table.

htmlcsshtml-table
99
Deniz Dogan

Vous pouvez obtenir des colonnes de hauteur égale en CSS en appliquant un remplissage inférieur d'une grande quantité et une marge négative inférieure du même montant et en entourant les colonnes d'un div dépassé par un débordement. Centrer verticalement le texte est un peu plus délicat, mais cela devrait vous aider.

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

Je pense qu'il vaut la peine de mentionner que la réponse précédente de streetpc a un code HTML non valide, le doctype est XHTML et des guillemets simples entourent les attributs. A noter également que vous n'avez pas besoin d'un élément supplémentaire avec clear pour effacer les flotteurs internes du conteneur. Si vous utilisez overflow hidden, cela efface les flottants dans tous les navigateurs non-IE, puis il suffit d'ajouter quelque chose à hasLayout, tel que width ou zoom: 1, ce qui permettra à IE d'effacer ses flotteurs internes.

J'ai testé cela dans tous les navigateurs modernes FF3 + Opera9 + Chrome Safari 3+ et IE6/7/8. Cela peut sembler un truc moche mais cela fonctionne bien et je l’utilise beaucoup en production.

J'espère que ça aide.

154
Natalie Downe

C'est l'année 2012 + n, donc si vous ne vous souciez plus d'IE6/7, display:table, display:table-row et display:table-cell fonctionnent dans tous les navigateurs modernes:

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

Mise à jour 2016-06-17: Si vous pensez que l'heure est venue pour display:flex, consultez Flexbox Froggy .

94
Dmitry Leskov

Vous devez utiliser flexbox pour y parvenir. Il n'est pas pris en charge dans IE8 et IE9 et uniquement avec le préfixe -ms dans IE10, mais tous les autres navigateurs le supportent. Pour les préfixes de fournisseur, vous devez également utiliser autoprefixer .

.parent {
    display: flex;
    flex-wrap: wrap; // allow wrapping items
}

.child {
    flex-grow: 1;
    flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}
17
Luca Steeb

vous pouvez obtenir ce travail avec js:

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>
10
Andi P. Trix

C'est un problème classique en CSS. Il n'y a pas vraiment de solution pour cela.

Cet article de A List Apart est une bonne lecture de ce problème. Il utilise une technique appelée "fausses colonnes", consistant à avoir une image d'arrière-plan en mosaïque verticale sur l'élément contenant les colonnes qui crée l'illusion de colonnes de longueur égale. Comme il se trouve sur l'emballage des éléments flottants, il est aussi long que l'élément le plus long.

Les éditeurs de A List Apart ont cette note sur l'article:

Note des éditeurs: Cet article, bien qu'excellent pour son époque, pourrait ne pas refléter les meilleures pratiques modernes.

Cette technique nécessite des conceptions de largeur complètement statiques qui ne fonctionnent pas bien avec les dispositions liquides et les techniques de conception réactives qui sont populaires aujourd'hui pour les sites impliquant plusieurs périphériques. Pour les sites de largeur statique, cependant, c'est une option fiable.

5
Philippe Leybaert

J'ai eu le même problème et, à mon avis, la meilleure option consiste à utiliser un peu de javascript ou de jquery.

Vous pouvez obtenir que les div recherchés aient la même hauteur en obtenant la valeur de div la plus élevée et en appliquant cette valeur à toutes les autres div. Si vous avez beaucoup de divs et beaucoup de solutions, je suggère d’écrire un peu de code js à l’avance pour déterminer lequel de tous les divs est le plus élevé, puis utilisez sa valeur.

Avec jquery et 2 divs c'est très simple, voici un exemple de code:

$('.smaller-div').css('height',$('.higher-div').css('height'));

Et pour finir, il reste 1 dernière chose… .. Leur rembourrage (haut et bas) doit être le même! Si vous avez un rembourrage plus grand, vous devez éliminer les différences de rembourrage. 

4
Mr Br

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}
<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>

1
ms muthu

Cela fonctionne pour moi dans IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).

Fonctionne également dans IE 6 si vous décommentez la division plus claire en bas . Edit : comme Natalie Downe l’a dit, vous pouvez simplement ajouter width: 100%; à #container à la place.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        #container {
            overflow: hidden;
            border: 1px solid black;
            background-color: red;
        }
        #left-col {
            float: left;
            width: 50%;
            background-color: white;
        }
        #right-col {
            float: left;
            width: 50%;
            margin-right: -1px; /* Thank you IE */
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='left-col'>
            Test content<br />
            longer
        </div>
        <div id='right-col'>
            Test content
        </div>
        <!--div style='clear: both;'></div-->
    </div>
</body>
</html>

Je ne connais pas de méthode CSS permettant de centrer verticalement le texte dans la bonne division si celle-ci n’a pas une hauteur fixe. Si tel est le cas, vous pouvez définir le line-height sur la même valeur que la hauteur de la div et mettre un div interne contenant votre texte avec display: inline; line-height: 110%.

1
instanceof me

En utilisant Javascript, vous pouvez donner aux deux balises div la même hauteur. La plus petite div s'ajustera à la même hauteur que la plus grande des balises div en utilisant le code ci-dessous: 

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

Avec "left" et "right" étant les identifiants des balises div. 

1
Quintox303

Autant que je sache, vous ne pouvez pas faire cela avec les implémentations actuelles de CSS. Pour créer deux colonnes d'égale hauteur, vous avez besoin de JS.

1
Calin Don

En utilisant la propriété css -> display: table-cell

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}
<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>

0
user5139166

En utilisant JS, utilisez data-same-height="group_name" dans tous les éléments pour lesquels vous voulez avoir le même height.

L'exemple: https://jsfiddle.net/eoom2b82/

Le code:

$(document).ready(function() {
    var equalize = function () {
        var disableOnMaxWidth = 0; // 767 for bootstrap

        var grouped = {};
        var elements = $('*[data-same-height]');

        elements.each(function () {
            var el = $(this);
            var id = el.attr('data-same-height');

            if (!grouped[id]) {
                grouped[id] = [];
            }

            grouped[id].Push(el);
        });

        $.each(grouped, function (key) {
            var elements = $('*[data-same-height="' + key + '"]');

            elements.css('height', '');

            var winWidth = $(window).width();

            if (winWidth <= disableOnMaxWidth) {
                return;
            }

            var maxHeight = 0;

            elements.each(function () {
                var eleq = $(this);
                maxHeight = Math.max(eleq.height(), maxHeight);
            });

            elements.css('height', maxHeight + "px");
        });
    };

    var timeout = null;

    $(window).resize(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }

        timeout = setTimeout(equalize, 250);
    });
    equalize();
});
0
Wiliam

Il y a plusieurs années, la propriété float utilisée pour résoudre ce problème avec l'approche table utilisant display: table; et display: table-row; et display: table-cell;.

Mais maintenant, avec la propriété flex, vous pouvez le résoudre avec 3 lignes de code: display: flex; et flex-wrap: wrap; et flex: 1 0 50%;

.parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
 // flex: flex-grow flex-shrink flex-basis;
    flex: 1 0 50%;
}

1 0 50% sont les flex valeurs que nous avons données à: flex-grow flex-shrink flex-basis respectivement. C'est un raccourci relativement nouveau dans flexbox pour éviter de les saisir individuellement. J'espère que cela aide quelqu'un là-bas

0
FouadDev

Je devais faire quelque chose de similaire, voici ma mise en œuvre. Pour récapituler l’objectif, c’est de faire en sorte que deux éléments occupent la largeur d’un conteneur parent donné et que la hauteur soit aussi élevée que nécessaire. Essentiellement hauteur égale à la hauteur maximale de la plus grande quantité de contenu, mais l'autre conteneur est affleurant. 

html

<div id="ven">
<section>some content</section>
<section>some content</section>
</div>

css

#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}
0
this guy