Espace vertical pour une <div> flexible

**zool.bzh** · 02/08/2025, 19h19

Bonjour

voci l'etat de mon site fbi-soundsystem :

Nom : fbi-soundsystem.png
Affichages : 111
Taille : 189,0 Ko

j'aimerais que la partie liens soit coller � la partie menu avec la partie 4 flexible qui elle m�me soit coll�e a la partie viviteurs, coller � seven

comment faire svp

**NoSmoking** · 04/08/2025, 18h48

Bonjour,
quelle est la structure mise en place et le CSS appliqu� ?

Je pr�sume que les �l�ments de gauche ont un conteneur commun d�fini ce qui devrait donc, en l'absence de margin, les � coll�s �.

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
<body>
  <header></header>
  <aside>
    <nav></nav>
    <div></div>
    <div></div>
    <div></div>
  </aside>
  <main></main>
  <footer></footer>
</body>

**zool.bzh** · 06/08/2025, 12h27

Merci NoSmocking

voila ce que j'ai :

Nom : menu4.png
Affichages : 60
Taille : 11,9 Ko

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
  <head>
  <link href="text.css" rel="stylesheet" type="text/css" />
        <link href="grid_fbi.css" rel="stylesheet" type="text/css" />
 
	</head>
<body>
<div class="wrapper">
 
   <div class="one"><img src="pix/elements/header.png" height="233" width="970" ></div>
 
	  <aside>
	  <div  class=" two bgMenu red divGrid">
 
Accueil<br/>
Forum<br>
Photos<br>
Videos<br>
Soundz<br>
Flys<br>
Presse<br>
GuestBook<br>
      </div>
 
  <div class="three bgLiens"></div>
  <nav>Quatre</nav>
  <div class="five bgVisit"></div>
  </aside> 
  <div class="six">Six</div>
  <div class="seven">Seven</div>
 
</div>
 
</body>
</head>

et

Code css :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 970px;
}
.wrapper > div {
 
 border: 1px solid #CA0000;
  background-color: #FFF;
 
  color: #000;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
 
}
.one {
 width: 970px;
 height: 233px;
 
 grid-column: 1 / 4;
  grid-row: 1;
}
.two {
	background-color: #000;
	border: 1px solid #CA0000;
 	width: 173px;
	grid-column: 1;
  grid-row: 2;
}
 
.bgMenu {
	width: 173px;
background-color: #000;	
	background-image: 
	   url('pix/elements/menu_up.png'), 
	   url('pix/elements/init_down.png'); 
		background-repeat: 
	   no-repeat;
 
	background-position: 
	  top, 
	   bottom;
}	
.three {
 	border: 1px solid #CA0000;
	width: 173px;
	grid-column: 1;
  grid-row: 3;
}	
 
 
.bgLiens {
	height: 100px;
	width: 173px;
background-color: #000;	
	background-image: 
	   url('pix/elements/liens_up.png'), 
	   url('pix/elements/init_down.png'); 
		background-repeat: 
	   no-repeat;
 
	background-position: 
	  top, 
	   bottom;
}
.four {
 border: 1px solid #CA0000;
height: auto;
 width: 173px;
	grid-column: 1;
  grid-row: 4;
}
 
.five {
 height: 90px;
 border: 1px solid #CA0000;
 width: 173px;
	grid-column: 1;
  grid-row: 5;
}
 
.bgVisit {
	width: 173px;
background-color: #000;	
	background-image: 
	   url('pix/elements/visit_up.png'), 
	   url('pix/elements/init_down.png'); 
		background-repeat: 
	   no-repeat;
 
	background-position: 
	  top, 
	   bottom;
}
 
.six {
	  height: 500px;
	  width: 807px;
	grid-column: 2 / 3;
  grid-row: 2 / 6;
}
.seven {
 	width: 980px;
	grid-column: 1 / 4;
  grid-row: 6;
}
.divGrid {
padding-top: 25px;
padding-right: auto;
padding-bottom: 10px;
padding-left: 25px
 
}

comment rendre "quatre" flexible pour que "visiteur" soit en bas de page quelque soit la hauteur de "Six" ??

**NoSmoking** · 07/08/2025, 10h49

comment rendre "quatre" flexible pour que "visiteur" soit en bas de page quelque soit la hauteur de "Six" ??

cela ne veut pas dire grand chose

Cependant tu n'en es pas loin, avec le CSS suivant tu devrais voir l'�l�ment se placer en bas :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
aside {
  display: flex;
  flex-direction: column;
  grid-row: 2 / 6;         /* doit prendre la hauteur de « six » */
}
.bgVisit {
  margin-top: auto;
}

Il y a encore des imperfections, mais on a surement pas tout.

Je te livre un exemple de gabarit correspondant visiblement � ton besoin :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gabarit simple avec display:grid</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2178399">
<meta name="category" content="css">
<meta name="description" content="CSS grid : utilisation des grilles CSS pour réaliser une mise en page simple.">
<style>
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
h1, h2, h3 {margin: .25em 0;color: #069;}
code {font-family: Courier New; color: #00F}
.main-grid {
  display: grid;
  height: 100vh;
  max-width: 60em;
  margin: auto;
  background-color: #FFF;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
  grid-template-areas: "header header"
                       "sidebar main"
                       "footer footer";
  grid-gap: 2px;
}
.header {
  padding: 0 .5em;
  border: 1px solid #669;
  background-color: #DEF;
  grid-area: header;
}
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: #FEE;
  grid-area: sidebar;
}
.main {
  padding: .5em;
  border: 1px solid #996;
  background-color: #FFE;
  grid-area: main;
}
.footer {
  padding: 0 .5em;
  border: 1px solid #696;
  background-color: #EFD;
  grid-area: footer;
}
.sidebar > * {
  padding: .5em;
  border: 1px solid #CCC;
  background: #FFF;
}
.sidebar > :last-child {
  margin-top: auto;
}
</style>
</head>
<body class="main-grid">
  <header class="header">
    <h1>Header</h1>
  </header>
  <aside class="sidebar">
    <section class="menu">
      <h2>Menu</h2>
      <nav >
        <ul>
          <li><a href="#">Accueil</a>
          <li><a href="#">Contact</a>
          <li><a href="#">À propos</a>
        </ul>
      </nav>
    </section>
    <section class="info">
      <h2>Info</h2>
      <p><p>
    </section>
    <section class="cadre">
      <h2>Cadre</h2>
      <p>Cadre poussé vers le bas avec <br><code>margin-top: auto</code></p>
    </section>
  </aside>
  <main class="main">
    <article>
      <h2>Main</h2>
    </article>
  </main>
  <footer class="footer">
    <h2>Footer</h2>
  </footer>
</body>
</html>

**zool.bzh** · 09/08/2025, 15h02

Merci beaucoup NoSmocking

Espace vertical pour une <div> flexible

CSS

Discussions similaires

Partager

Partager