Comment puis-je garder deux divs côte à côte la même hauteur?
https://stackoverflow.com/questions/2997767
-
24-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai côte à côte deux divs côte à côte. Je voudrais la hauteur de leur être le même, et reste le même si l'un d'entre eux redimensionne. Je ne peux pas comprendre cela cependant. Idées?
Pour clarifier ma question confuse, je voudrais les deux boîtes pour être toujours la même taille, de sorte que si l'on pousse parce que le texte est placé en elle, l'autre devrait croître pour correspondre à la hauteur.
<div style="overflow: hidden">
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!
</div>
</div>
La solution
Flexbox
Avec FlexBox il est une seule déclaration:
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>
Prefixes peut être nécessaire pour les anciens navigateurs, voir .
Autres conseils
Ceci est un problème commun que beaucoup ont rencontré, mais heureusement certains esprits intelligents comme Ed Eliot sur son blog ont posté leurs solutions en ligne.
En fait ce que vous faites est faire les deux divs / colonnes très de haut en ajoutant un padding-bottom: 100% puis « duper le navigateur » en pensant qu'ils ne sont pas si grand que ça en utilisant margin-bottom: -100%. Il est mieux expliqué par Ed Eliot sur son blog, qui comprend également de nombreux exemples.
.container {
overflow: hidden;
}
.column {
float: left;
margin: 20px;
background-color: grey;
padding-bottom: 100%;
margin-bottom: -100%;
}<div class="container">
<div class="column">
Some content!<br>
Some content!<br>
Some content!<br>
Some content!<br>
Some content!<br>
</div>
<div class="column">
Something
</div>
</div>
Ceci est un domaine où CSS n'a jamais vraiment eu de solutions - vous êtes en bas à l'aide de balises <table> (ou les truquer en utilisant les valeurs de display:table* CSS), comme c'est le seul endroit où un « garder un tas d'éléments identiques hauteur » a été mis en œuvre.
<div style="display: table-row;">
<div style="border:1px solid #cccccc; display: table-cell;">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; display: table-cell;">
Some content!
</div>
</div>
Cela fonctionne dans toutes les versions de Firefox, Chrome et Safari, Opera à partir d'au moins la version 8, et dans IE de la version 8.
Utilisation jQuery
En utilisant jQuery, vous pouvez le faire dans un super simple d'une ligne-script.
// HTML
<div id="columnOne">
</div>
<div id="columnTwo">
</div>
// Javascript
$("#columnTwo").height($("#columnOne").height());
L'utilisation de CSS
Ceci est un peu plus intéressant. La technique est appelée Colonnes Faux . Plus ou moins vous ne pas réellement régler la réelle hauteur pour être le même, mais vous rig quelques éléments graphiques afin qu'ils voir à la même hauteur.
Je suis surpris que personne n'a mentionné l'Absolu technique Colonnes (très ancienne mais fiable): http://24ways.org/2008/absolute-columns/
À mon avis, il est de loin supérieure à deux colonnes Faux et la technique de mise en page One True.
L'idée générale est qu'un élément avec position: absolute; positionnera contre l'élément le plus proche parent qui a position: relative;. Vous pouvez ensuite étirer une colonne pour remplir une hauteur de 100% en affectant à la fois un top: 0px; et bottom: 0px; Voici un exemple (ou tout autre pixels / pourcentages que vous avez réellement besoin.):
<!DOCTYPE html>
<html>
<head>
<style>
#container
{
position: relative;
}
#left-column
{
width: 50%;
background-color: pink;
}
#right-column
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 50%;
background-color: teal;
}
</style>
</head>
<body>
<div id="container">
<div id="left-column">
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</div>
<div id="right-column">
Lorem ipsum
</div>
</div>
</body>
</html>
Vous pouvez utiliser des hauteurs égales de Jquery Plugin pour accomplir, ce plug-ins fait toute la div de même hauteur exacte que d'autres. Si l'un d'entre eux pousse et d'autres vont aussi se développer.
Voici un échantillon de mise en œuvre
Usage: $(object).equalHeights([minHeight], [maxHeight]);
Example 1: $(".cols").equalHeights();
Sets all columns to the same height.
Example 2: $(".cols").equalHeights(400);
Sets all cols to at least 400px tall.
Example 3: $(".cols").equalHeights(100,300);
Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.
Voici le lien
Vous pouvez utiliser Colonnes Faux .
Fondamentalement, il utilise un fond d'image dans un contenant DIV pour simuler les deux égaux hauteur-DIV. En utilisant cette technique, vous allowes également d'ajouter des ombres, des coins arrondis, bordures personnalisées ou d'autres motifs de funky vos conteneurs.
fonctionne uniquement avec les boîtes à largeur fixe cependant.
Et bien a testé et fonctionne correctement dans tous les navigateurs.
Juste repéré ce fil lors de la recherche pour cette réponse. Je viens de faire une petite fonction jQuery, espère que cela aide, fonctionne comme un charme:
JAVASCRIPT
var maxHeight = 0;
$('.inner').each(function() {
maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});
HTML
<div class="lhs_content">
<div class="inner">
Content in here
</div>
</div>
<div class="rhs_content">
<div class="inner">
More content in here
</div>
</div>
Cette question a été posée il y a 6 ans, mais il est encore digne de donner une réponse simple avec FlexBox mise en page de nos jours.
Il suffit d'ajouter le CSS suivant au père <div>, il fonctionnera.
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
Les deux premières lignes déclarent qu'il sera affiché comme FlexBox. Et flex-direction: row indique aux navigateurs que ses enfants seront exposés dans des colonnes. Et align-items: stretch répondra à l'exigence que tous les éléments enfants étendront à la même hauteur l'un d'entre eux deviennent plus élevés.
Si vous ne me dérange un des divs étant un maître et dictant la hauteur pour les deux divs ceci est tout:
Peu importe ce que, la div à droite se développer ou squish et trop-plein pour correspondre à la hauteur du div à gauche.
Les deux divs doivent être les enfants immédiats d'un conteneur, et doivent indiquer leur largeur à l'intérieur.
CSS pertinent:
.container {
background-color: gray;
display: table;
width: 70%;
position:relative;
}
.container .left{
background-color: tomato;
width: 35%;
}
.container .right{
position:absolute;
top:0px;
left:35%;
background-color: orange;
width: 65%;
height:100%;
overflow-y: auto;
}
J'aime utiliser des éléments pseudo pour y parvenir. Vous pouvez l'utiliser comme arrière-plan du contenu et de les laisser remplir l'espace.
Avec ces approche, vous pouvez définir les marges entre les colonnes, les bordures, etc.
.wrapper{
position: relative;
width: 200px;
}
.wrapper:before,
.wrapper:after{
content: "";
display: block;
height: 100%;
width: 40%;
border: 2px solid blue;
position: absolute;
top: 0;
}
.wrapper:before{
left: 0;
background-color: red;
}
.wrapper:after{
right: 0;
background-color: green;
}
.div1, .div2{
width: 40%;
display: inline-block;
position: relative;
z-index: 1;
}
.div1{
margin-right: 20%;
}<div class="wrapper">
<div class="div1">Content Content Content Content Content Content Content Content Content
</div><div class="div2">Other</div>
</div>
La façon dont la grille CSS
La façon moderne de faire cela (ce qui évite aussi d'avoir à déclarer une <div class="row"></div>-wrapper autour de tous les deux articles) serait d'utiliser une grille CSS. Cela vous donne également un contrôle facile sur les écarts entre vos lignes d'article / colonnes.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.grid-item {
background-color: #f8f8f8;
box-shadow: 0 0 3px #666;
text-align: center;
}
.grid-item img {
max-width: 100%;
}<div class="grid-container">
<div class="grid-item">1 <br />1.1<br />1.1.1</div>
<div class="grid-item">2</div>
<div class="grid-item">3
<img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
3.1
</div>
<div class="grid-item">4</div>
<div class="grid-item">5 <br />1.1<br />1.1.1</div>
<div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
6.1</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9 <br />1.1<br />1.1.1</div>
<div class="grid-item">10</div>
<div class="grid-item">11
<img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
11.1
</div>
<div class="grid-item">12</div>
</div>
J'ai essayé presque toutes les méthodes mentionnées ci-dessus, mais la solution de FlexBox ne fonctionnera pas correctement avec Safari, et les méthodes de mise en page de la grille ne fonctionnera pas correctement avec les anciennes versions d'IE.
Cette solution convient à tous les écrans et est compatible multi-navigateur:
.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}
@media (max-width: 767px){
.container li { display: inline-block; width:100%; min-height:auto!important;}
}
Le procédé ci-dessus sera égale à la hauteur des cellules, et pour les petits écrans, comme portable ou une tablette, on peut utiliser la méthode de @media mentionné ci-dessus.
vous pouvez utiliser jQuery pour y parvenir facilement.
CSS
.left, .right {border:1px solid #cccccc;}
jQuery
$(document).ready(function() {
var leftHeight = $('.left').height();
$('.right').css({'height':leftHeight});
});
HTML
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet.</p>
</div>
Vous devrez inclure jQuery
Je sais que depuis longtemps, mais je partage ma solution de toute façon. Ceci est un truc de jQuery.
--- HTML
<div class="custom-column">
<div class="column-left">
asd
asd<br/>
asd<br/>
</div>
<div class="column-right">
asd
</div>
</div>
<div class="custom-column">
<div class="column-left">
asd
</div>
<div class="column-right">
asd
asd<br/>
asd<br/>
</div>
</div>
---- CSS
<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
.column-left { float:left; width:25%; background:#CCC; }
.column-right { float:right; width:75%; background:#EEE; }
</style>
--- JQUERY
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$balancer = function() {
$('.custom-column').each(function(){
if($('.column-left',this).height()>$('.column-right',this).height()){
$('.column-right',this).height($('.column-left',this).height())
} else {
$('.column-left',this).height($('.column-right',this).height())
}
});
}
$balancer();
$(window).load($balancer());
$(window).resize($balancer());
});
</script>
Le Fiddle
HTML
<div class="container">
<div class="left-column">
</div>
<div class="right-column">
<h1>Hello Kitty!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
</div>
</div>
CSS
.container {
float: left;
width: 100%;
background-color: black;
position: relative;
left: 0;
}
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after {
clear: both;
}
.left-column {
float: left;
width: 30%;
height: 100%;
position: absolute;
background: wheat;
}
.right-column {
float: right;
width: 70%;
position: relative;
padding: 0;
margin: 0;
background: rebeccapurple;
}
Ceci est un plugin jQuery qui définit la hauteur égale pour tous les éléments de la même rangée (en vérifiant offset.top de l'élément). Donc, si la matrice de jQuery contient des éléments de plus d'une rangée (différent offset.top), chaque rangée aura une hauteur séparé, sur la base de l'élément avec la hauteur maximale, sur cette ligne.
jQuery.fn.setEqualHeight = function(){
var $elements = [], max_height = [];
jQuery(this).css( 'min-height', 0 );
// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){
var offset_top = jQuery(el).offset().top;
var el_height = jQuery(el).css('height');
if( typeof $elements[offset_top] == "undefined" ){
$elements[offset_top] = jQuery();
max_height[offset_top] = 0;
}
$elements[offset_top] = $elements[offset_top].add( jQuery(el) );
if( parseInt(el_height) > parseInt(max_height[offset_top]) )
max_height[offset_top] = el_height;
});
// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){
if( jQuery($elements[offset_top]).length > 1 )
jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );
}
};
var numexcute = 0;
var interval;
$(document).bind('click', function () {
interval = setInterval(function () {
if (numexcute >= 20) {
clearInterval(interval);
numexcute = 0;
}
$('#leftpane').css('height', 'auto');
$('#rightpane').css('height', 'auto');
if ($('#leftpane').height() < $('#rightpane').height())
$('#leftpane').height($('#rightpane').height());
if ($('#leftpane').height() > $('#rightpane').height())
$('#rightpane').height($('#leftpane').height());
numexcute++;
}, 10);
});
Je faisais le même problème donc je créé cette petite fonction à l'aide jquery comme jquery fait partie de toutes les applications Web de nos jours.
function fEqualizeHeight(sSelector) {
var sObjects = $(sSelector);
var iCount = sObjects.length;
var iHeights = [];
if (iCount > 0) {
$(sObjects).each(function () {
var sHeight = $(this).css('height');
var iHeight = parseInt(sHeight.replace(/px/i,''));
iHeights.push(iHeight);
});
iHeights.sort(function (a, b) {
return a - b
});
var iMaxHeight = iHeights.pop();
$(sSelector).each(function () {
$(this).css({
'height': iMaxHeight + 'px'
});
});
}
}
Vous pouvez appeler cette fonction à la page événement ready
$(document).ready(function(){
fEqualizeHeight('.columns');
});
J'espère que cela fonctionne pour vous.
Je suis récemment tombé sur cela et n'a pas vraiment les solutions donc j'ai essayé d'expérimenter.
.mydivclass {inline-block; vertical-align: middle; width: 33%;}
<div>
<div style="border:1px solid #cccccc; float:left; min-height:200px;">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; float:left; min-height:200px;">
Some content!
</div>
</div>
Ce que je l'ai fait ici est de changer la hauteur à hauteur min et il a donné une valeur fixe. si l'un d'entre eux est de se redimensionnées l'autre restera la même hauteur. ne sais pas si c'est ce que vous voulez
