CSS - Égale Hauteur des Colonnes?

Question

Dans le CSS, je peux faire quelque chose comme ceci:

Mais je n'ai aucune idée de comment changer cela à quelque chose comme:

---

Est-ce possible avec CSS?

Si oui, comment puis-je le faire sans le préciser explicitement la hauteur (le contenu se développer)?

Answer 1

Flexbox

Si vous lisez ceci à la fin de 2013, vous avez flexbox à votre disposition. En supposant que cette mise en forme:

<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Avec flexbox, l'égalité de la hauteur des colonnes est juste une seule déclaration:

.row {
    display: flex; /* equal height of the children */
}

.col {
    flex: 1; /* additionally, equal width */
}

Prise en charge du navigateur: http://caniuse.com/flexbox; de démonstration: http://jsfiddle.net/7L7rS/

Tableau de mise en page

Si vous avez encore le besoin de soutenir IE 8 ou 9, alors vous devez utiliser le tableau de mise en page:

.row {
    display: table;
}

.col {
    display: table-cell;
    width: 33.33%; /* depends on the number of columns */
}

Démo: http://jsfiddle.net/UT7ZD/

Answer 2

Oui.

Ce n'est pas la seule méthode pour le faire, mais c'est sans doute le plus élégant de la méthode que j'ai rencontré.

En voici un autre.

Answer 3

Donnez overflow: hidden pour les conteneurs et les grands (et de l'égalité) marge négative et positive de rembourrage pour les colonnes. Notez que cette méthode a quelques problèmes, par exemple, l'ancre des liens ne fonctionnent pas à l'intérieur de votre mise en page.

Balisage

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

CSS

.container {
    overflow: hidden;
}

.column {
    float: left;    
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

Le Résultat

Answer 4

Vous pouvez le faire facilement avec le code JavaScript suivant:

$(window).load(function() {
    equalizeHeights($('div.left, div.middle, div.right'));
}); 

function equalizeHeights(elements) {
    var tallest = 0, height;

    for(i; i < elements.length; i++) {
        height = $(elements[i]).height();

        if(height > tallest)
            tallest = height;
    }

    elements.height(tallest);
}

Answer 5

Vous pouvez utiliser des règles CSS, comme ceci:

<style type='text/css">
    .container { display: table; }
    .container .row { display: table-row; }
    .container .row .panel { display: table-cell; }
</style>
<div class="container">
    <div class="row">
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
    </div>
</div>