HTML / CSS: Créer deux div flottants de la même hauteur
https://stackoverflow.com/questions/1205159
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai un petit problème particulier que je résous actuellement à l'aide d'une table , voir ci-dessous. En gros, je veux que deux divs occupent 100% de la largeur disponible, mais n’occupent que l’espace vertical requis (ce qui n’est pas si évident sur la photo). Les deux doivent à tout moment avoir exactement la même hauteur avec une petite ligne entre eux, comme indiqué.
(source: pici.se )
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 ce n’est pas en réalité une table.
La solution
Vous pouvez obtenir des colonnes de hauteur égale en CSS en appliquant un remplissage inférieur, une marge négative inférieure du même montant et en entourant les colonnes avec un div dont le débordement est masqué. 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 que cela vaut la peine de mentionner que la réponse précédente de streetpc a un code HTML incorrect, le type de document est XHTML et des guillemets simples entourent les attributs. Il est également intéressant de noter que vous n’avez pas besoin d’un élément supplémentaire avec clear afin de supprimer les flotteurs internes du conteneur. Si vous utilisez overflow hidden, cela efface les flottants dans tous les navigateurs non-IE et il suffit ensuite d'ajouter quelque chose à hasLayout, tel que width ou zoom: 1, IE effacera ses flotteurs internes.
J'ai testé cela sur 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 cela vous aidera.
Autres conseils
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 fonctionne dans tous les navigateurs modernes:
Mise à jour 2016-06-17: Si vous pensez que l'heure du affichage: flex est venue, consultez Flexbox Froggy .
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 prennent en charge. Pour les préfixes de fournisseur, vous devez également utiliser préfixe automatique .
.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.
}
vous pouvez le faire fonctionner avec js:
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>
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 "colonnes fausses", basée sur le fait d'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 statiques en largeur, il s'agit toutefois d'une option fiable.
J'ai eu un problème similaire 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 à tous 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:
$ ('. plus petit-div'). css ('hauteur', $ ('. supérieur-div'). css ('hauteur'));
Et pour finir, il y a 1 dernière chose. Leur rembourrage (haut et bas) doit être le même! Si vous avez un rembourrage plus grand, vous devez éliminer la différence de rembourrage.
Autant que je sache, vous ne pouvez pas le faire avec les implémentations actuelles de CSS. JS est nécessaire pour créer deux colonnes de même hauteur.
Cela fonctionne pour moi dans IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).
Fonctionne également dans IE 6 si vous supprimez la mise en commentaire de la division plus claire en bas.
Modifier : 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 hauteur de ligne sur la même valeur que la hauteur de div et placer un div interne contenant votre texte avec display: inline; hauteur de ligne: 110% .
En utilisant Javascript, vous pouvez donner la même hauteur aux deux balises div. La plus petite div s'ajustera à la même hauteur que la plus haute 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 " être l'identifiant des balises div.
En utilisant la propriété css - > affichage: cellule-tableau
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>
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>
Avec JS, utilisez data-same-height = "quot_name" et dans tous les éléments pour lesquels vous voulez avoir la même hauteur .
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();
});
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 ne 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%;
}
