Bandeau et nav fixed sur une page en flexbox

Version imprimable

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:

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:

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>

21/12/2017, 10h00
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:

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:

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

Bonjour Jef,
Code:

1 2 3 4 5 6 7 #page, #page > header, #page > nav { margin:0 auto; max-width:960px; }
Où est la difficulté ? :koi:

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:

Citation:

Où est la difficulté ?

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

Code:

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:

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

21/12/2017, 17h05
Invité

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

Citation:

Envoyé par JefReb

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 !
21/12/2017, 17h44
JefReb
Oui, mais là où j'ai un petit soucis intellectuel, c'est que l'on code:
Code:

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:

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:

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.
21/12/2017, 18h07
Invité

Apparemment, tu ne comprends pas ce que signifie :

Citation:

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