Rendre une div responsive en hauteur avec FlexBox

**wChris79** · 19/05/2018, 12h35

Bonjour,
J'ai 9 div, 3 par ligne et je souhaite lorsque je modifie la taille de la fenêtre du navigateur en hauteur que les div se modifie en conséquence . J'arrive à le faire en largeur en utilisant un width en pourcentage. Mais je n'y arrive pas en hauteur... Et je n'ai rien trouvé sur le web pour m'aider.

Voici mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<style>
 
body{
        min-width:300px;
        min-height: 300px;
}
 
.flex-container {
  display: flex;
  flex-wrap: wrap; 
  background-color: DodgerBlue;
  justify-content: space-between;
}
 
.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  width: 25%;
  height: 25%;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
 
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div> 
</div>
</body>
</html>

Merci beaucoup pour votre aide.

Invité · 19/05/2018, 12h55

bonjour,

...en hauteur que les div se modifie en conséquence...

quel est le comportement attendu ?

**wChris79** · 19/05/2018, 13h09

Je souhaite que les div augmentent en hauteur si j'augmente en hauteur la fenêtre de mon navigateur et inversement qu'elles diminuent si je diminue en hauteur la taille de la fenêtre de mon navigateur.
Concernant la largeur cela fonctionne parfaitement. Lorsque j'augmente la largeur de la fenêtre de mon navigateur la largeur de mes div augmentent proportionnellement. Idem pour la diminution jusqu'à la taille minimale définie dans le CSS.

**wChris79** · 19/05/2018, 21h22

Bonsoir,
Je me réponds à moi-même. J'ai trouvé une solution possible pour mon problème. Cf. code ci-dessous.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
<head>
<style>
 html, body {
        padding : 0;
        margin : 0;
        height : 100%;
}
 
.flex-container {
        display: flex;
    flex-wrap: wrap; 
        justify-content: stretch; /*space-evenly;*/
        height: 100%; 
        background-color: DodgerBlue;
}
 
.flex-container > div {
        background-color: #f1f1f1;
        margin: 1px;
        width: 25%; 
        text-align: center;
        line-height: 75px;
        font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>
</body>
</html>

**NoSmoking** · 20/05/2018, 09h29

Bonjour,
la partie flexible de ta page déborde dans ton cas attendu que tu la fixe à 100% du parent, <body> dans ton cas, et qu'il y a un <h1> en tête.

Ajoute à ton CSS un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
body {
  display: flex;
  flex-direction: column;
}

oui du flex dans du flex, la scrollbar verticale devrait disparaître.

**wChris79** · 20/05/2018, 13h50

Bonjour,
Super !!! ça marche nickel chrome....
Encore merci pour votre aide. Sujet résolu.

Rendre une div responsive en hauteur avec FlexBox

Responsive design en CSS

Discussions similaires

Partager

Partager