Il y a un certain nombre de solutions pour ce problème, y compris OneTrueLayout Technique, Faux Colonnes Technique, CSS Tableaux d'Affichage de la Technique et il y a aussi une Technique de Stratification.
Une solution à parts égales de la hauteur-ed colonnes est le CSS de tableau d'Affichage de la Technique que des moyens d'utiliser l' écran:table defonction.
Il fonctionne pour Firefox 2+, Safari 3+, Opera 9+ et IE8.
Le code de la CSS de Tableaux d'Affichage:
Le HTML
<div id="container">
<div id="rowWraper" class="row">
<div id="col1" class="col">
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div id="col2" class="col">
Column 2<br />Eco cologna duo est!
</div>
<div id="col3" class="col">
Column 3
</div>
</div>
</div>
Le CSS
<style>
#container{
display:table;
background-color:#CCC;
margin:0 auto;
}
.row{
display:table-row;
}
.col{
display: table-cell;
}
#col1{
background-color:#0CC;
width:200px;
}
#col2{
background-color:#9F9;
width:300px;
}
#col3{
background-color:#699;
width:200px;
}
</style>
Même si il y a un problème avec l'auto-expansion de la largeur de la table-cell il peut être résolu facilement par l'insertion d'une autre div à l'intérieur de la table-cell et de lui donner une largeur fixe. De toute façon, l'expansion de la largeur qui se passe dans le cas d'une utilisation extrêmement long termes (dont je doute que quiconque de l'utiliser a, disons, 600px long terme) ou du div qui est la largeur est supérieure à la table de la cellule de largeur.
La Fausse Colonne Technique est le plus populaire de la solution à ce problème, mais il a quelques inconvénients tels que, vous avez pour redimensionner l'arrière-plan en mosaïque de l'image si vous souhaitez redimensionner les colonnes et c'est pas non plus une solution élégante.
Le OneTrueLayout Technique consiste à créer un padding-bottom d'une extrême grande hauteur et la découper en apportant de la frontière réelle de la position "normal position logique" par l'application d'une marge négative-bas de la même valeur énorme et cacher la mesure créé par le rembourrage avec overflow:hidden appliquée au contenu wraper. Un exemple simplifié serait:
Le fichier HTML:
<html><head>
<style>
.wraper{
background-color:#CCC;
overflow:hidden;
}
.floatLeft{
float:left;
}
.block{
padding-bottom:30000px;
margin-bottom:-30000px;
width:100px;
background-color:#06F;
border:#000 1px solid;
}
</style>
</head>
<body>
<div class="wraper">
<div class="block floatLeft">first col</div>
<div class="block floatLeft">
Second col<br />Break Line
</div>
<div class="block floatLeft">Third col</div>
</div>
</body>
</html>
La Technique de Stratification doit être très soigné solution qui implique un positionnement absolu de la div à l'intérieur d'un principal par rapport positionné wrapper div. Il se compose essentiellement d'un certain nombre des enfants les divs et la div principale. La div principale a impérativement position: relative à l'attribut css collection. Les enfants de cette div sont tous impérativement position:absolute. Les enfants doivent avoir des haut et des bas ensemble de 0 et de gauche à droite dimensions pour accueillir les colonnes avec chaque autre. Par exemple, si nous avons deux colonnes, l'une d'une largeur de 100px et l'autre de 200px, considérant que nous voulons le 100px dans le côté gauche et le 200px dans le côté droit de la colonne de gauche doit avoir {left:0; right:200px} et la colonne de droite {left:100px; right:0;}
À mon avis non implémentée 100% de la hauteur au sein d'un système automatisé de hauteur conteneur est un inconvénient majeur et le W3C devrait envisager la révision de cet attribut.
D'autres ressources: link1, link2, link3, link4, link5 (important)
