web-dev-qa-db-fra.com

Comment créer des colonnes de hauteur égale en CSS pur

Comment faire en sorte que votre div atteigne tout le long? Comment remplir l'espace vertical du div parent? Comment obtenir des colonnes de longueur égale sans utiliser d'images d'arrière-plan?

J'ai passé quelques jours à googler et disséquer du code pour comprendre comment réaliser des colonnes de longueur égale aussi facilement et efficacement que possible. C'est la réponse que j'ai trouvée et je voulais partager ces connaissances avec le style copier-coller de la communauté dans un petit tutoriel.

Pour ceux qui pensent que c'est un doublon, ce n'est pas le cas. J'ai été inspiré par plusieurs sites Web, parmi eux http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks mais le code ci-dessous est unique.

csscss-floathtmlmultiple-columns
13
Paul

L'une des choses délicates de la conception Web moderne est de créer une disposition à deux colonnes (ou plus) où toutes les colonnes sont de même hauteur. Je me suis lancé dans une quête pour trouver un moyen de le faire en CSS pur.

Vous pouvez le faire plus facilement en utilisant une image d'arrière-plan dans un div envelopper qui contient vos deux colonnes (ou l'arrière-plan de la page).

Vous pouvez également le faire en utilisant des cellules de tableau CSS, mais malheureusement, la prise en charge du navigateur pour cela est encore floue, ce n'est donc pas une solution préférée. Lisez la suite, il y a une meilleure façon.

J'ai trouvé mon inspiration dans deux pages sur le Web, bien que je préfère ma solution, car elle me donne plus de liberté pour utiliser des coins arrondis et des largeurs précises ou des dispositions en pourcentage, et elle est plus facile à modifier, votre mise en page finale tenant div ne vous force pas pour faire un calcul de nombre négatif.

== L'astuce: ==

Vous créez d'abord les colonnes de conception d'arrière-plan, puis vous mettez un div pleine largeur qui peut contenir votre contenu normal. L'astuce concerne les colonnes flottantes dans les colonnes, créant un effet Push sur toutes les colonnes parentes lorsque le contenu s'étend sur la longueur, quelle que soit la colonne de fin la plus longue.

Dans cet exemple, j'utiliserai une grille à 2 colonnes dans une enveloppe enveloppante centrée avec des coins arrondis. J'ai essayé de garder les peluches pour un copier-coller facile.

== Étape 1 ==

Créez votre page Web de base.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>

== Étape 2 ==

Créez un div flottant à l'intérieur d'un autre div flottant. Ensuite, appliquez une marge négative sur la div intérieure pour la faire sortir de son cadre visuellement. J'ai ajouté des bordures en pointillés à des fins d'illustration. Sachez que si vous faites flotter le div extérieur vers la gauche et donnez au div intérieur une marge négative à gauche, le div intérieur passera sous le bord de la page sans vous donner une barre de défilement.

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
    border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
    border: 3px dotted gold; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        this content obviously only fits the left column for now.
    </div>
</div>
</body>
</html>

== Étape 3 ==

Dans le div intérieur: créez un div sans arrière-plan qui a le avec de toutes les colonnes combinées. Il poussera sur le bord de la div intérieure. J'ai ajouté une bordure en pointillés à des fins d'illustration. Ce sera la toile de votre contenu.

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
    border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
    border: 3px dotted gold; /*temporary css*/
}
#overbothsides{
    float:left;
    width:400px;
    border: 3px dotted black; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        <div id="overbothsides">
            this content spans over both columns now.
        </div>
    </div>
</div>
</body>
</html>

== Étape 4 ==

Ajoutez votre contenu. Dans cet exemple, je place deux divisions qui sont positionnées sur la disposition. J'ai aussi enlevé les bordures pointillées. Presto, c'est tout. Vous pouvez utiliser ce code si vous le souhaitez.

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
}
#overbothsides{
    float:left;
    width:400px;
}
#leftcol{
    float:left;
    width:80px;
    padding: 10px;
}
#rightcol{
    float:left;
    width:280px;
    padding: 10px;
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        <div id="overbothsides">
            <div id="leftcol">left column content</div>
            <div id="rightcol">right column content</div>
        </div>
    </div>
</div>
</body>
</html>

== Étape 5 ==

Pour le rendre plus agréable, vous pouvez centrer l'ensemble du design dans une div envelopper et lui donner des coins arrondis. Les coins arrondis ne s'afficheront pas dans l'ancien IE sauf si vous utilisez un correctif spécial pour cela.

<!DOCTYPE HTML>
<html>
<head>
<style>
#wrap{
    position:relative;
    width:500px;
    margin:20px auto;    
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    border-bottom-right-radius: 20px;
}
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
}
#overbothsides{
    float:left;
    width:400px;
}
#leftcol{
    float:left;
    width:80px;
    padding: 10px;
}
#rightcol{
    float:left;
    width:280px;
    padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="rightsideBG">
        <div id="leftsideBG">
            <div id="overbothsides">
                <div id="leftcol">left column content</div>
                <div id="rightcol">right column content</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

== Sources d'inspiration ==

7
Paul

Pour une solution plus simple, vous pouvez donner au parent display: table et ses enfants display: table-cell, comme ça:

.parent {
  display: table;
}
.child {
  display: table-cell;
}

Voir DÉMO .

Veuillez noter que cela ne fonctionne pas dans IE7, donc si le support IE7 est requis, une solution plus élaborée serait nécessaire.

25
zakangelle