Comment garder deux divs côte à côte à la même hauteur?


443

J'ai deux divs côte à côte. J'aimerais que leur hauteur soit la même et reste la même si l'un d'eux redimensionne. Je ne peux pas comprendre celui-ci cependant. Des idées?

Pour clarifier ma question confuse, j'aimerais que les deux cases aient toujours la même taille, donc si l'une grandit parce que du texte y est placé, l'autre devrait grandir 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>


Voulez-vous que si l'un d'eux devient plus grand, que l'autre conservera la même taille?
Wai Wong

Un exemple qui n'est pas une solution mais qui se trouve dans un environnement modifiable peut être trouvé ici: jsfiddle.net/PCJUQ
MvanGeest

Réponses:


593

Flexbox

Avec flexbox, c'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>

Des préfixes peuvent être requis pour les anciens navigateurs, voir la prise en charge des navigateurs .


17
flexbox a fonctionné comme un charme. Si vous développez un design réactif et que vous souhaitez que votre deuxième div descende sur des écrans plus petits, vous devrez définir .row pour afficher: block; dans votre requête média.
Nick Zulu

7
@NickZulu Je crois que dans ce cas, vous devez définir flex-direction: column: jsfiddle.net/sdsgW/1
Pavlo

1
@Eckstein, il n'est pas requis pour les deux solutions. Voir les démos.
Pavlo

3
cela ne fonctionnait pas pour moi jusqu'à ce que j'ajoute de la hauteur: 100%; aux colonnes enfants
Jacob Raccuia

1
Est-il possible de faire en sorte qu'un enfant div spécifique détermine la hauteur de l'autre? De sorte que si le contenu d'un autre div enfant change, il ne peut pas changer la hauteur de ce div spécifique
Narek Malkhasyan

149

C'est un problème commun que beaucoup ont rencontré, mais heureusement, certains esprits intelligents comme Ed Eliot sur son blog ont publié leurs solutions en ligne.

Fondamentalement, ce que vous faites est de rendre les deux div / colonnes très hautes en ajoutant un padding-bottom: 100%, puis "tromper le navigateur" en pensant qu'elles ne sont pas si hautes en utilisant margin-bottom: -100%. C'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>


1
L'explication sur One True Layout était un peu médiocre, mais après avoir vérifié le premier lien, je l'ai bien implémenté à partir d'un des exemples qu'il a utilisés. Cependant, c'est vraiment mauvais car vous devez utiliser une image pour représenter la bordure inférieure des colonnes, et c'est douteux pour la prise en charge de plusieurs navigateurs. Cependant, cela fonctionne et il ne repose pas sur javascript, donc je vais le marquer comme correct. Merci!
NibblyPig

Cela ne semble pas fonctionner dans les anciens navigateurs IE (oui, malheureusement, je dois encore prendre en charge IE6). Est-il possible de rendre cela compatible?
strongriley

1
@strongriley Checkout Le blog d'Ed Eliot: ejeliot.com/blog/61 Il devrait fonctionner dans IE6. Peut-être que le problème est causé ailleurs?
mqchen

1
Cela casse si la fenêtre est trop étroite et que les divs sont placés les uns sous les autres.
WhyNotHugo

1
Comment définissez-vous le remplissage de cellule que vous souhaitez réellement présenter dans la cellule du tableau, par exemple padding: 7px 10px, si la padding-bottompropriété est définie sur 100%? (PS overflow:hiddenétait également requis pour moi sur le row)
user1063287

55

C'est un domaine où CSS n'a jamais vraiment eu de solutions - vous en êtes à l'utilisation de <table>balises (ou à les simuler en utilisant les display:table*valeurs CSS ), car c'est le seul endroit où un «garder un tas d'éléments de la même hauteur» a été implémenté.

<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 à partir de la version 8.


5
Cette solution n'est pas disponible pour ceux qui ont besoin de prendre en charge IE6 / IE7, mais je pense que c'est la plus propre.
twsaef

2
cette réponse est PARFAITE! juste un petit rappel: il peut arriver que certains clients nécessitent "table" au lieu de "table-ligne"
tiborka

@ user2025810: aw, merci. Savez - vous que les clients ont besoin au tablelieu de table-row?
Paul D. Waite

@ user2025810: ouais, je ne peux pas dire que j'aie jamais testé ça :) Bon à savoir cependant, cheers. (Compte tenu de son orientation PDF, je parie qu'il prend en charge certaines des fonctionnalités liées à l'impression de CSS 2.1 qui ne sont pas très bien implémentées dans les navigateurs.)
Paul D. Waite

7
Avec cette solution - oubliez d'utiliser le pourcentage widthpour vos divs, sauf si vous ajoutez display: tablel'élément parent, ce qui gâchera les choses.
Alex G

42

Utilisation de jQuery

En utilisant jQuery, vous pouvez le faire dans un script d'une seule ligne super simple.

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

Utilisation de CSS

C'est un peu plus intéressant. La technique s'appelle les fausses colonnes . Plus ou moins que vous ne définissez pas vraiment la réelle hauteur être le même, mais vous rig quelques éléments graphiques afin qu'ils regardent la même hauteur.


Je pense que l'utilisation de JavaScript est une très bonne méthode. Le problème est - il se désagrège s'il est désactivé. Je pense que je vais l'utiliser de toute façon et créer la meilleure contingence possible; -) Merci!
nicorellius

13
Cela implique que la hauteur de columnOne est toujours plus grande que columnTwo.
Sébastien Richer

1
Vous devez comparer la hauteur des colonnes avant de leur appliquer la hauteur. Je pense que js est la meilleure méthode pour ce problème, presque tous les navigateurs sont activés js, sinon, ils devraient sortir de votre site Web et de nombreux autres sites Web.
SalmanShariati

6
Cela ne fonctionnera également que lors du premier chargement de la page. Si la fenêtre est ensuite redimensionnée, ce qui provoque le redimensionnement des div, elles ne resteront pas synchronisées
ikariw

16

Je suis surpris que personne n'ait mentionné la technique (très ancienne mais fiable) des colonnes absolues: http://24ways.org/2008/absolute-columns/

À mon avis, il est de loin supérieur à la fois aux fausses colonnes et à la technique de One True Layout.

L'idée générale est qu'un élément avec position: absolute;se positionnera par rapport à l'élément parent le plus proche position: relative;. Vous étirez ensuite une colonne pour remplir 100% de hauteur en attribuant à la fois un top: 0px;et bottom: 0px;(ou les pixels / pourcentages dont vous avez réellement besoin). Voici un exemple:

<!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>

1
Si la colonne de droite comporte plus de lignes que la gauche, le contenu déborde.
David

11

Vous pouvez utiliser le plugin Equal Heights de Jquery pour accomplir, ce plugin fait tous les div de même hauteur exacte que les autres. Si l'un d'eux grandit et l'autre grandira également.

Voici un exemple d'implémentation

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

http://www.cssnewbie.com/equalheights-jquery-plugin/


8

Vous pouvez utiliser des fausses colonnes .

Fondamentalement, il utilise une image d'arrière-plan dans un DIV contenant pour simuler les deux DIV d'égale hauteur. L'utilisation de cette technique vous permet également d'ajouter des ombres, des coins arrondis, des bordures personnalisées ou d'autres motifs géniaux à vos conteneurs.

Ne fonctionne cependant qu'avec des boîtes à largeur fixe.

Bien testé et fonctionne correctement dans tous les navigateurs.


7

Je viens de repérer ce fil lors de la recherche de cette réponse. Je viens de faire une petite fonction jQuery, j'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>

1
J'ai utilisé externeHeight pour inclure le rembourrage et les bordures. C'est la solution la plus propre, je pense.
Sébastien Richer

Solution parfaite que je cherchais. D'autres solutions sont bonnes dans le cas où une ligne a quelques colonnes mais cette approche est meilleure pour le contenu HTML complexe. Petit ajout: lorsque le document est redimensionné dans la page réactive, la hauteur du contenu ne change pas en raison de la correction. J'ai donc ajouté $ ('. Inner'). Css ({height: "initial"}); avant «chaque fonction» pour définir la hauteur par défaut.
bafsar

5

La manière de la grille CSS

La manière moderne de le faire (qui évite également d'avoir à déclarer un <div class="row"></div>-wrapper tous les deux éléments) serait d'utiliser une grille CSS. Cela vous permet également de contrôler facilement les écarts entre vos lignes / colonnes d'articles.

.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>


4

Cette question a été posée il y a 6 ans, mais il vaut toujours la peine de donner une réponse simple avec la disposition flexbox de nos jours.

Ajoutez simplement le CSS suivant au père <div>, cela fonctionnera.

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

Les deux premières lignes déclarent qu'il sera affiché en tant que flexbox. Et flex-direction: rowindique aux navigateurs que ses enfants seront affichés en colonnes. Et align-items: stretchrépondra à l'exigence que tous les éléments enfants s'étirent à la même hauteur si l'un d'eux devient plus haut.


1
@TylerH Mais demandé a édité sa question et l'a ajoutée I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.qui n'est pas mentionnée dans la réponse acceptée ... Je viens de terminer ici. Peut-être aurais-je dû le commenter sur la réponse acceptée?
Hegwin

1
il n'est pas mentionné explicitement car il est déjà couvert par la simple déclaration CSS. Ouvrez l'extrait de réponse en plein écran et redimensionnez la fenêtre de votre navigateur pour voir; ils restent de la même taille les uns que les autres.
TylerH

1
Même si la réponse acceptée utilise Flexbox, celle-ci a une approche différente. align-items: stretch est ce qui m'a mis sur la voie de la résolution de mon problème dans une situation très particulière.
BenoitLussier

N'est-ce pas align-items: stretch;flex par défaut?
madav

3

Utiliser CSS Flexbox et min-height a fonctionné pour moi

entrez la description de l'image ici

Supposons que vous ayez un conteneur avec deux divisions à l'intérieur et que vous souhaitiez que ces deux divisions aient la même hauteur.

Vous devez définir « display: flex » sur le conteneur ainsi que « align-items: stretch »

Ensuite, donnez à l'enfant divs une « hauteur minimale » de 100%

Voir le code ci-dessous

.container {
  width: 100%;
  background: linear-gradient(red,blue);
  padding: 1em;
  /* important */
  display: flex;
  /* important */
  align-items: stretch;
  justify-content: space-around;
}

.child {
  width: 100%;
  background: white;
  color: grey;
  margin: 0 .5em;
  padding: .5em;
  /* important */
  min-height: 100%;
}
<div class="container">
  
  <div class="child"><p>This is some text to fill the paragraph</p></div>
  <div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></div>
  
</div>


2

Si cela ne vous dérange pas que l'un des divs soit un maître et qu'il dicte la hauteur pour les deux, divil y a ceci:

Violon

Quoi qu'il en soit, le divbouton de droite s'agrandit ou s'ajuste et déborde pour correspondre à la hauteur dudiv côté gauche.

Tous les deux div s doivent être les enfants immédiats d'un conteneur et doivent spécifier leurs largeurs à l'intérieur.

CSS pertinents:

.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;
}

2

J'aime utiliser des pseudo-éléments pour y parvenir. Vous pouvez l'utiliser comme arrière-plan du contenu et les laisser remplir l'espace.

Avec cette approche, vous pouvez définir des 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>


1

Le violon

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;            
}

1

J'ai essayé presque toutes les méthodes mentionnées ci-dessus, mais la solution flexbox ne fonctionnera pas correctement avec Safari et les méthodes de disposition de la grille ne fonctionneront pas correctement avec les anciennes versions d'IE.

Cette solution s'adapte à tous les écrans et est compatible avec tous les navigateurs:

.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;}
}

La méthode ci-dessus égalera la hauteur des cellules, et pour les petits écrans comme les mobiles ou les tablettes, nous pouvons utiliser la @mediaméthode mentionnée ci-dessus.


0

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


1
Cela ne fonctionnera pas si les deux <div>ont un contenu dynamique. La raison pour laquelle je dis est que si vous <div class="right">avez plus de contenu que l'autre problème se pose.
Surya

0

Je sais que ça fait longtemps mais je partage quand même ma solution. Ceci est une astuce 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>

-1

Il s'agit d'un plugin jQuery qui définit la hauteur égale pour tous les éléments sur la même ligne (en vérifiant le offset.top de l'élément). Donc, si votre tableau jQuery contient des éléments de plus d'une ligne (différent offset.top), chaque ligne aura une hauteur séparée, basée sur 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] );

}

};


-2
    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);

    });

1
Veuillez fournir tout commentaire à votre réponse.
sgnsajgon du

-2

J'avais le même problème alors j'ai créé cette petite fonction en utilisant jquery car 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 sur l'événement prêt pour la page

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

J'espère que cela fonctionne pour vous.


-3

Je suis récemment tombé sur cela et je n'ai pas vraiment aimé les solutions, j'ai donc essayé d'expérimenter.

.mydivclass {inline-block; vertical-align: middle; width: 33%;}


-4
<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 j'ai fait ici, c'est de changer la hauteur en min-hauteur et de lui donner une valeur fixe. si l'un d'eux est redimensionné, l'autre restera à la même hauteur. Je ne sais pas si c'est ce que tu veux


L'OP voulait que les divs aient toujours la même hauteur.
Simon Forsberg
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.