Discussion :

[SuperLow]

J'ai un soucis sur lfex. Je débute, j'ai suivi quelque tuto, mais un truc m'échappe concernant la hauteur.

En mettant "flex-grow: 1;" sur le centre, il s'adapte sur toute la hauteur (super pratique), par contre le menu ca ne veut pas.
Ca déborde si je met du padding sur les liens du menu.

Donc on ne pourrait mettre qu'un flex-grow à 1 ?

JSFiddle : https://jsfiddle.net/SuperLow/ofubqxba/1/

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
		<header class="entete">
					Lorem ipsum
		</header>
 
		<nav class="nav">
				<nav>
					<ul>
					<li><a href="Alpha">Alpha</a></li>
							<li><a href="Beta">Beta</a></li>
							<li><a href="Charlie">Charlie</a></li>
							<li><a href="Delta">Delta</a></li>
			</ul>				</nav>
		</nav>
 
		<main class="centre">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis nibh vitae justo hendrerit faucibus in at magna. Praesent ultrices tincidunt lectus id facilisis. In ornare venenatis purus nec dictum. Fusce quis tellus ut risus viverra posuere a at lectus. Curabitur luctus elit a ultricies convallis. Cras vitae metus ut lorem interdum sagittis. Duis viverra venenatis odio blandit cursus. Duis venenatis purus vel neque aliquam, sit amet blandit lectus luctus. Nunc ac commodo metus, eget semper dui. Fusce congue nunc massa.
 
Integer pellentesque, ligula venenatis ornare viverra, tortor tellus gravida eros, a porta nisi purus at est. Mauris eleifend non turpis in dictum. Ut egestas nisl eget fringilla ultrices. Ut vitae placerat est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis mi metus, pharetra non libero sed, aliquet blandit quam. Sed malesuada vel dolor quis vestibulum.
 
Sed vel bibendum ante. Proin condimentum enim a urna aliquam lacinia. Nullam ultricies vitae arcu ac placerat. Nunc nec leo sodales, ultrices arcu quis, lacinia nunc. Proin bibendum posuere dictum. Ut porta ut nibh quis elementum. Sed sagittis tempus condimentum. Morbi eget lobortis tortor. Sed eget feugiat nibh. Vivamus vitae ligula ultricies, pellentesque turpis nec, mattis sapien. 
		</main>
 
		<footer class="block-pied">
		</footer>

Code :

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
html
{
	font-size: 1rem;	
}
 
*
{	
	margin:0;
	padding:0;
	text-decoration:none;
}
 
*, *:before, *:after
{
	box-sizing:border-box;
}
 
ul
{ 
	list-style-type: none; 
}
 
li
{
	list-style: none;
}
 
main,
aside,
nav
{
	display:block;
}
 
html, body
{
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: grey;
}
 
a{
	color:#333333;
}
 
.entete,
.nav,
.centre,
{
	font-size: 0;
}
 
/* 	--- HEADER -------------------*/
 
.entete
{
	color: white;
	font-size: 3rem;
	text-align: center;
	background-color: black;
}
 
 
/* 	--- NAV ----------------------*/
.nav
{
	color: white;
	background-color: purple;
  line-height: 1rem;
}
 
.nav nav ul
{
	font-size: 0;
  	flex-grow: 1;
 
}
.nav nav ul li
{	
	display: inline-block;
}
 
.nav nav ul li a
{	
	color: white;
	font-size: 1rem;
	padding: 5px 10px 5px 10px; /* < Debordement */
	background-color: red;
  border-right: 1px solid green;
}
 
.nav nav ul li a:hover
{	
	background-color: yellow;
  color: black;
 
}
 
 
/* 	--- CENTER -------------------*/
.centre
{
	flex-grow: 1;
}

[NoSmoking]

Bonjour,
revoie quand même la structure de ta page <nav> dans <nav> on ne voit pas bien l'intérêt mais commence par mettre tes <a> en display:block et ton soucis devrait disparaître.