Discussion :

[JefReb]

Bonjour à tous.
Y-a-t-il un moyen d'avoir des éléments fixed avec des flexbox.

Par exemple avoir le bandeau et la nav fixed et le reste en flexbox?


https://codepen.io/JefReb/pen/RxRwxx

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
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body {
	height: 100%;
	font-size: 100%;
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
	width: 100%;
}
header, nav, section, article, aside, footer {
	border: 1px solid black;
}
#page {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
#page, main {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	justify-content: center;
}
header, nav, article, aside, footer {
	padding: 1em;
}
header {
	height: 140px;
}
article {
	height:2000px;  /* pour faire défiler la page sans texte */
}
@media screen and (max-width: 959px) {
article, aside {
	width: 100%;
}
nav, footer {
	order: 2;
}
}
@media screen and (min-width: 960px) {
#page {
	width: 960px;
}
header, nav, main, section, article, aside, footer {
	text-align: center;
}
nav {
	padding: 3px;
	height: auto;
}
section {
	display: -webkit-flex;
	display: flex; 					
	-webkit-flex-direction: row;
	flex-direction: row;
}
aside, article {
	margin: 1em;
}
article {
	min-height:900px;
	flex: 1 1 auto; 				
}
aside {
	width: 25%;
	height:auto;
	max-height:300px;
}
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="page">
  <header>Bandeau</header>
  <nav>Navigation</nav>
  <main>
    <section>
      <article>Article</article>
      <aside>aside </aside> 
    </section>
  </main>
  <footer>Pied de page</footer>
</div>

[JefReb]

Je vais reposer ma question différemment.
On peut avoir un bandeau et une navigation fixe de façon responsive:
https://codepen.io/JefReb/pen/mpEvmJ

Mais dans ce cas toute la largeur de l'écran est pris sur les desktop. Pas forcément idéal.
Si on veut restreindre par exemple, il faut rajouter une largeur:

Code css :

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

1
2
3
4
5
6
@media screen and (min-width: 960px) {
#page, header, nav {
     max-width:960px;
}
...
...

mais dans ce cas, la page est bloquée à gauche de l'écran et ce n'est pas non plus l'idéal.
Si on veut placer cette page au milieu de l'écran, il faut rajouter:

Code css :

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

1
2
3
4
 
#page {
	margin:0 auto;
}

Et là le bandeau et la nav reste bloqués à gauche alors que la section et article sont bien au milieu de l'écran.

Ce qui est normal puisque le fixed sort du flux.
Sans passer par javascript y a-t-il une solution??
Merci d'avance

[Invité]

Bonjour Jef,

Code css :

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

1
2
3
4
5
6
7
#page,
#page > header,
#page > nav
{
  margin:0 auto;
  max-width:960px;
}

Où est la difficulté ?

[JefReb]

Je suis extrêmement vexé. Car je ne poste en général que lorsque j'ai épuisé ma patience à ne pas comprendre.
J'avais pourtant bien cherché, mais va savoir, à force on fini par ne plus rien voir. Pourtant j'essaye d'être méthodique et simple ...
Mais merci Jérôme, oui comme tu dis:

Où est la difficulté ?

Solution complète pour ceux que ça intéresse:
https://codepen.io/JefReb/pen/wpzwBM

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
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body {
	height: 100%;
	font-size: 100%;
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
	width: 100%;
}
header, nav, section, article, aside, footer {
	border: 1px solid black;
}
#page {
	position: relative;
	width: 100%;
	height: auto;
}
#page, main {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	justify-content: center;
}
header, nav, article, aside, footer {
	padding: 1em;
}
header{
	position: fixed;	
    min-height: 140px;
    top: 0;
    right: 0;
    left: 0;
	z-index:1;
	background-color:yellow;
}
nav{
	padding: 3px;
	height: 35px;
}
main	{
	margin-top:140px;
}
section	{
	background-color: #FCF;
}
article {
	height:1500px;  /* pour faire défiler la page sans texte */
}
@media screen and (max-width: 959px) {
nav{
	position: static;
}
article, aside {
	width: 100%;
}
nav, footer {
	order: 2;
}
}
@media screen and (min-width: 960px) {
#page, 
#page > header, 
#page > nav {
	max-width:960px;
	margin:0 auto;
}
header, nav, main, section, article, aside, footer {
	text-align: center;
}
nav{
	position: fixed;
    top: 140px;
    right: 0;
    left: 0;
	z-index:1;
	background-color:blue;
}
main	{
	margin-top:175px;
}
section {
	display: -webkit-flex;
	display: flex; 					
	-webkit-flex-direction: row;
	flex-direction: row;
}
aside, article {
	margin: 1em;
}
article {
	min-height:900px;
	flex: 1 1 auto; 				
}
aside {
	width: 25%;
	height:auto;
	max-height:300px;
}
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="page">
  <header>Bandeau</header>
  <nav>Navigation</nav>
  <main>
    <section>
      <article>Article</article>
      <aside>aside </aside> 
    </section>
  </main>
  <footer>Pied de page</footer>
</div>

merci encore ...

[Invité]

Pourtant, toute ta réflexion est correcte : tu avais fait 95% du travail.
Il te manquait juste la finition.

Ce qui est normal puisque le fixed sort du flux.

Ben oui. Et donc.....

....et donc ils ne sont plus influencés par les contraintes appliquées au div #page !

[JefReb]

Oui, mais là où j'ai un petit soucis intellectuel, c'est que l'on code:

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
 
header{
    position: fixed;    
    top: 0;
    right: 0;
    left: 0;
 
}
nav{
    position: fixed;
    top: 140px;
    right: 0;
    left: 0;
}

Or, les 2 sont encapsulés dans #page. Donc, pourquoi

Code css :

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

1
2
3
4
#page   {
  margin:0 auto;
  max-width:960px;
}

ne marche pas tout simplement?
Pourquoi dans ce cas left:0 ne se réfère pas au conteneur #page?
Oui, d'accord, il sort du flux, mais pourquoi quand on code:

Code css :

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

1
2
3
4
5
6
7
8
 
#page,
#page > header,
#page > nav
{
  margin:0 auto;
  max-width:960px;
}

cela fonctionne?

Oui certains diront que je fais du mal aux petites mouches ...
Je comprends le top:140px;, mais j'ai du mal à comprendre le positionnement left:0 qui est soit par rapport à l'écran, soit au bord gauche du conteneur.
c'est idiot, mais je comprends parfaitement le positionnement absolute quand il est dans un conteneur relatif ou absolute, mais dans ce cas présent je ne vois pas.
Mais bon, ça vaut peut être le coup de comprendre ce problème qui parait simple pour certains...

J'aurai du mal à répondre jusqu'à ... l'année prochaine. Ou du moins au hazard du wifi.

[Invité]

Apparemment, tu ne comprends pas ce que signifie :

... puisque le fixed sort du flux.

Le fonctionnement de fixed est différent de absolute.
Relis attentivement la documentation.


Cela dit... Bonnes fêtes de fin d'année !