Dimensionnement en "%" de la fenêtre

**patricktoulon** · 04/02/2018, 11h50

bonjour a tous
j'ai un soucis avec le dimentionnement du body et d'un div a l'interieur
je voudrais que automatiquement il soit a 99% de la taille de la fenetre mais visiblement ca ne fonctionne pas

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
 
BODY{
 width:99%;
 height:99%;
  margin-top:1px;
 margin-left:1px;
 border:1px solid green;
}
#panne{
 width:99%;
 height:20pt;
background: linear-gradient(to right, rgba(247,251,252,1) 0%,rgba(217,237,242,1) 40%,rgba(173,217,228,1) 100%); 
 border: 1px solid black;
 display:block;
}
#editeur{
 width:99%;
 height:99%;
 font-size:18px;
 float:left;
 border:1px solid gray
}

quelqu'un a une idée

**JefReb** · 04/02/2018, 12h05

Bonjour Patrick,
Sans aucune agressivité,

, si tu rajoutais un petit peu de html, (on est pas devant ton écran) cela nous faciliterait un peu pour chercher.
car ... qu'est-ce que #panne et #editeur?

**patricktoulon** · 04/02/2018, 12h14

bonjour et merci pour le retour

se sont des balises DIV tout simplement
toute deux enfant direct du body

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
<!DOCTYPE html >
<html>
<head>
<html lang="fr">
<!--meta charset="utf-8"-->
<meta http-equiv="X-UA-Compatible" content="IE=10">
<style>
BODY{
 width:99%;
 height:99%;
  margin-top:1px;
 margin-left:1px;
 border:1px solid green;
}
#panne{
 width:99%;
 height:20pt;
background: linear-gradient(to right, rgba(247,251,252,1) 0%,rgba(217,237,242,1) 40%,rgba(173,217,228,1) 100%); 
 border: 1px solid black;
 display:block;
}
#editeur{
 width:99%;
 min-height:99%;
 font-size:18px;
 float:left;
 border:1px solid gray
}
.fondbouton{
 display:block;
  background-color:#F2F2F2
  width:25px;
 height:25px;
 margin-left:5px;
 margin-top:3px;
 border:1px solid black;
 float:left;
 border-radius:7px;
}
.bouton{
 width:104%;
 height:102%;
}
.fondbouton:hover {
border:1px solid red;
}
#palette{
 background-color:gray;
  font-size=1px;
 display:block;
  width:190px;
  height:170px;position:absolute;
  top:30px;
  left:5px;
  border:1px solid black;
}
.Bcolor{
  font_size:0px;
  fload:left;
  width:15px;
  height:15px;
  margin-top:0px;
  margin-left:0px;
  border;1px solid black;
}
#fname{
  position:absolute;
  top:30px;
  left:120px;
}
#fsize{
  position:absolute;
  top:30px;
  left:145px;
  width:80px;
}
p{
 margin:0
}
</style>
 
<script type="text/javascript">
 
</script>
</head>
<body>
<DIV id=panne></div>
<div id="editeur" contenteditable=true></div>
</body>
</html>

**JefReb** · 04/02/2018, 12h23

J'espère que ma réponse n'est pas stupide.
Cela marche parfaitement, mais il faut mettre #panne et #editeur à 100%

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
<!DOCTYPE html >
<html>
<head>
<html lang="fr">
<!--meta charset="utf-8"-->
<meta http-equiv="X-UA-Compatible" content="IE=10">
<style>
BODY{
 width:99%;
 height:99%;
  margin-top:1px;
 margin-left:1px;
 border:1px solid green;
}
#panne{
 width:100%;
 height:20pt;
background: linear-gradient(to right, rgba(247,251,252,1) 0%,rgba(217,237,242,1) 40%,rgba(173,217,228,1) 100%); 
 border: 1px solid black;
 display:block;
}
#editeur{
 width:100%;
 min-height:99%;
 font-size:18px;
 float:left;
 border:1px solid gray
}
.fondbouton{
 display:block;
  background-color:#F2F2F2
  width:25px;
 height:25px;
 margin-left:5px;
 margin-top:3px;
 border:1px solid black;
 float:left;
 border-radius:7px;
}
.bouton{
 width:104%;
 height:102%;
}
.fondbouton:hover {
border:1px solid red;
}
#palette{
 background-color:gray;
  font-size=1px;
 display:block;
  width:190px;
  height:170px;position:absolute;
  top:30px;
  left:5px;
  border:1px solid black;
}
.Bcolor{
  font_size:0px;
  fload:left;
  width:15px;
  height:15px;
  margin-top:0px;
  margin-left:0px;
  border;1px solid black;
}
#fname{
  position:absolute;
  top:30px;
  left:120px;
}
#fsize{
  position:absolute;
  top:30px;
  left:145px;
  width:80px;
}
p{
 margin:0
}
</style>
 
<script type="text/javascript">
 
</script>
</head>
<body>
<DIV id=panne></div>
<div id="editeur" contenteditable=true></div>
</body>
</html>

**patricktoulon** · 04/02/2018, 12h44

re
non meme 100% ne fonctionne pas ,mais dans tout les cas j'ai besoins de cet espace vide a droite pendant l'ecriture et test du document je le mettrais a 100 a la fin
avec cet espace j'ai le menu COMPLET au click droit de windows dans IE
voila le resultat que j'obtiens

Nom : Capture.JPG
Affichages : 180
Taille : 46,8 Ko

Nom : Capture.JPG
Affichages : 180
Taille : 46,8 Ko

**psychadelic** · 04/02/2018, 13h48

Ta question est imprécise
Les 99% tu les a mais en largeure, et tu le sais bien

Donc je suppose que tu recherche des 99% en hauteur.

Quand tu écris : BODY{ height:99%; c'est une notion de relation entre 2 entitées ou celle qui est subordonnée fait 99% de la premiere, ici e, l'occurence l'élément parent de BODY c'est HTML.

et tu considère que ce parent couvre tout l'espace de la fenêtre d'un navigateur.
Ce qui est faux bien sur.
les navigateurs se contentent de remplir leurs pages au fur et à mesure et si ça dépasse en hauteur il placent un scroll.
Donc si tu à 3 ou 4 lignes à placer, ben ta page elle fait 3 ou 4 lignes en hauteur au final, sur lequel tu demande de n'en occuper que 99%...
C'est pas très rationnel.

C'est un peu comme à l'époque des Papyrus, le déroulé ce faisait horizontalement, donc on avait un déroulé horizontal, et quand c'était trop grand on plaçait des rouleau.
Un peu aussi comme pour la tapisserie de Bayeux, c'est finalement un grand récit écrit pas panneaux successifs placés horizontalement cote à cote; etc...
Il y a aussi le fait qu'on utilise un systeme d'écriture horizontal, et que la lecture s'effectuait en faisant courir un doigt sous les lettre pour une lecture à voix haute (la lecture silencieuse n'arrive que bien plus tard) eque donc dérouler un parchemin verticalement compliquerait un peu les choses aussi.

mais je m'égare, je m'égare...

Tout ça pour te dire que sur les anciens navigateurs du moyen age, ton problème n'avait pas de solutions.

Aujourd'hui tu a juste a placer dans ton css: html { height:100% }

c'était si bête

Invité · 04/02/2018, 13h50

Bonjour,

Code html :

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

1
2
<div id=panne></div>
...

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
#palette{
...
  font-size=1px;
...
}
.Bcolor{
  font_size:0px;
  fload:left;
...
  border;1px solid black;
}

Comme je te l'ai déjà dit, tu manques de rigueur...

Ensuite, il faut prendre un peu de temps pour LIRE un tuto sur les bases du CSS.
Là, tu appliques pour les lartgeurs/hauteurs tantôt des %, tantôt des px, voire des pt...

**JefReb** · 04/02/2018, 13h52

Désolé d'insister, il doit y avoir une incompréhension quelque part.
Je prends exactement ton code donné en post 3
et je remplace #panne et #editeur par 100% au lieu de 99% et je n'obtiens pas du tout ta capture.
Voir le codepen:
https://codepen.io/JefReb/pen/KQzqyW

**patricktoulon** · 04/02/2018, 14h01

re
tu a raison insiste n'en soit pas désolé on finira bien par en trouver la raison

Mais !!! mise a part la précision sur le width ton resultat est faux aussi sur codepen

le div et le body doivent terminer en bas de page c'est pas le cas sur ta demo

d'autant plus que je fait une erreur depuis le debut

le body 99%
le panne 20pt(dimention en dur CSS)
l'editeur 99% alors que ca devrait etre 99% - 20pt mais je ne sais pas si c'est faisable en css

**patricktoulon** · 04/02/2018, 14h05

et oui l'antité n'est paut etre bas la bonne c'est vrai c'est pas body mais HTML je vais tenter

et oui le panne height est en dur et ne dois pas changer c'est 20pt absolu

Invité · 04/02/2018, 14h10

Code html :

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

1
2
3
4
<body>
  <div id="editeur" contenteditable=true></div>
  <div id="panne"></div>
</body>

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
 
* {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  height: 100%;
  min-height: 100%;
}
body {
  display: flex; display: -webkit-flex;
  width: 99%;
  margin: 0.5%;
  height: 99%;
  border: 1px solid green;
}
#panne {
  flex: 0 0 20pt; -webkit-flex: 0 0 20pt;
  width: 20pt;
  height: 20pt;
  background: #ccc;
}
#editeur {
  flex: 1 1 auto; -webkit-flex: 1 1 auto;
  background: #eee;
}

**psychadelic** · 04/02/2018, 14h21

voila, y avait aussi le problème du box sizing...

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
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>test de Bayeux</title>
<style>
/* reset CSS minimal */
* { box-sizing: border-box; }
* { margin: 0; padding: 0; outline: 0; }
 
html { height: 100%; background-color: red; }
 
BODY{
        width:99%;
        height:99%;
        margin-top:1px;
        margin-left:1px;
        border:1px solid green;
        background-color: grey;
}
#panne{
        width:99%;
        height:20pt;
        background: linear-gradient(to right, rgba(247,251,252,1) 0%,rgba(217,237,242,1) 40%,rgba(173,217,228,1) 100%); 
        border: 1px solid black;
        display:block;
}
#editeur{
        width:99%;
        height: calc(100% - 20pt); 
        font-size:18px;
        float:left;
        border:1px solid gray;
        background-color: pink;
}
</style>
</head>
<body>
	<div id="panne"> panne</div>
	<div id="editeur" contenteditable="true">editeur</div>
</body>
</html>

puis j'ai aussi dimensionné la partie "editeur" en la diminuant des 20pt pris par la partie "panne", sinon forcément ça déborde.

J'ai aussi mis des couleurs dégueux pour bien voir quelles surface son occupées par les un et les autres..

**patricktoulon** · 04/02/2018, 14h23

@jreaux62
j'ai testé ton code en modifiant juste la ligne width:20pt dans le style de panne c'est width 100% il n'y a que le height qui doit etre de 20pt en absolu

resultat avec mes bouton que j'ai remis a l'interieur pour un visuel concret
le pann est trop petit les boutons sont devenu verticale
Nom : Capture.JPG
Affichages : 169
Taille : 96,9 Ko

Nom : Capture.JPG
Affichages : 169
Taille : 96,9 Ko

je précise IE11en mode edge automatique

Invité · 04/02/2018, 15h26

Code html :

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

1
2
3
4
<body>
  <div id="panne"></div>
  <div id="editeur" contenteditable="true"></div>
</body>

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
* {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  height: 100%;
  min-height: 100%;
}
body {
  display: flex; display: -webkit-flex;
  flex-direction:column;
  width: 99%;
  margin: 0.5%;
  height: 99%;
  border: 1px solid green;
}
#panne {
  flex: 0 0 40px; -webkit-flex: 0 0 40px;
  height: 40px; /* A ADAPTER aux pictos */
  background: #ccc;
}
#editeur {
  flex: 0 0 auto; -webkit-flex: 0 0 auto;
  background: #eee;
}

**patricktoulon** · 04/02/2018, 22h25

Bonsoir a tous
milles excuses j'ai du partir tres vite

jreaux62 c'est presque bon sauf pour le div regarde le div "editeur"

Nom : Capture.JPG
Affichages : 181
Taille : 161,7 Ko

Nom : Capture.JPG
Affichages : 181
Taille : 161,7 Ko

code complet Wig

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html >
<html>
<head>
<html lang="fr">
<!--meta charset="utf-8"-->
<meta http-equiv="X-UA-Compatible" content="IE=11">
<style>
* {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  height: 100%;
  min-height: 100%;
}
body {
  display: flex; display: -webkit-flex;
  flex-direction:column;
  width: 99%;
  margin: 0.5%;
  height: 99%;
  border: 1px solid green;
}
#panne {
  flex: 0 0 40px; -webkit-flex: 0 0 40px;
  height: 40px; /* A ADAPTER aux pictos */
  background: #ccc;
}
#editeur {
  flex: 0 0 auto; -webkit-flex: 0 0 auto;
  background: #eee;
}
.fondbouton{
  display:block;
  background-color:#F2F2F2;
  width:25px;
  height:25px;
  margin-left:5px;
  margin-top:3px;
  border:1px solid black;
  float:left;
  border-radius:7px;
  overflow:hidden;
}
.bouton{
  width:104%;
  height:102%;
  margin-left:2px;
}
.fondbouton:hover {
   border:1px solid red;
}
#palette{
  background-color:gray;
  font-size=1px;
  display:block;
  width:190px;
  height:170px;position:absolute;
  top:30px;
  left:5px;
  border:1px solid black;
}
.Bcolor{
  font_size:0px;
  fload:left;
  width:15px;
  height:15px;
  margin-top:0px;
  margin-left:0px;
  border;1px solid black;
}
#fname{
  position:absolute;
  top:30px;
  left:120px;
}
#fsize{
  position:absolute;
  top:30px;
  left:145px;
  width:80px;
}
p{
 margin:0
}
</style>
 
<script type="text/javascript">
 
function execCom(fonction, argmt1,argmt2) {
   if(argmt1===undefined){argmt1=false;}
   if(argmt2===undefined){argmt2=null;}
   document.execCommand(fonction,argmt1,argmt2);
   var pal=document.getElementById('palette');
   pal.style.visibility="hidden";
   var L=document.getElementById('fname');
   L.style.visibility="hidden";
   var fz=document.getElementById('fsize');
   fz.style.visibility="hidden";
}
function palette(mode){
   var pal=document.getElementById("palette");
   pal.style.visibility="visible";
}
function listeF(){
   var L=document.getElementById("fname");
   L.style.visibility="visible";
}
function listeFZ(){
   var L=document.getElementById("fsize");
   L.style.visibility="visible";
}
</script>
</head>
<body>
<DIV id=panne><DIV class=fondbouton><IMG onclick="execCom('bold','false','null')" id=bold title="Texte en gras" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\bold.png" width=20 height=20></DIV>
<DIV class=fondbouton><IMG onclick="execCom('italic','false','null')" id=italic title="Mettre le texte de la selection en italic" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\italic.png"></DIV>
<DIV class=fondbouton><IMG onclick="palette('ForeColor')" id=foreColor title="Afficher la palette des font color" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\foreColor.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('underline','false','null')" id=underline title="Souligner le texte" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\underline.png"></DIV>
<DIV class=fondbouton><IMG onclick="listeF('i')" id=fontName title="Afficher la liste des font name" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\fontName.png"></DIV>
<DIV class=fondbouton><IMG onclick="listeFZ('i')" id=fontSize title="Afficher la liste des font size" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\fontSize.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('justifyLeft','false','null')" id=justifyLeft title="Aligner le texte a gauche " class=bouton src="file://C:\Users\polux\Desktop\imageBouton\justifyLeft.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('justifyCenter','false','null')" id=justifyCenter title="Centrer le texte" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\justifyCenter.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('justifyRight','false','null')" id=justifyRight title="Aligner le texte a droite" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\justifyRight.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('indent','false','null')" id=indent title="indenter le texte" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\indent.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('outdent','false','null')" id=outdent title="outdenter le texte" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\outdent.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('removeFormat','false','null')" id=removeFormat title="suprimer le formatage du texte" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\removeFormat.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('copy','false','null')" id=copy title="Copier la selection " class=bouton src="file://C:\Users\polux\Desktop\imageBouton\copy.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('cut','false','null')" id=cut title="Couper la selection" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\cut.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('paste','false','true')" id=paste title=coller class=bouton src="file://C:\Users\polux\Desktop\imageBouton\paste.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('createLink','false','null')" id=createLink title="Mettre un lien sur la selection" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\createLink.png"></DIV>
<DIV class=fondbouton><IMG onclick="execCom('unlink','false','null')" id=unlink title="Suprimer le lien " class=bouton src="file://C:\Users\polux\Desktop\imageBouton\unlink.png"></DIV>
<DIV class=fondbouton><IMG id=afficherhtml title="Afficher le code HTML" class=bouton src="file://C:\Users\polux\Desktop\imageBouton\afficherhtml.png"></DIV></DIV>
</div>
<div id="editeur" contenteditable=true><p></p></div>
<DIV id=palette style="VISIBILITY: hidden">
<BUTTON onclick="execCom('ForeColor','false','#000000')" class=Bcolor style="BACKGROUND-COLOR: #000000">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFFFFF')" class=Bcolor style="BACKGROUND-COLOR: #ffffff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF0000')" class=Bcolor style="BACKGROUND-COLOR: #ff0000">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#00FF00')" class=Bcolor style="BACKGROUND-COLOR: #00ff00">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#0000FF')" class=Bcolor style="BACKGROUND-COLOR: #0000ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFFF00')" class=Bcolor style="BACKGROUND-COLOR: #ffff00">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF00FF')" class=Bcolor style="BACKGROUND-COLOR: #ff00ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#00FFFF')" class=Bcolor style="BACKGROUND-COLOR: #00ffff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#800000')" class=Bcolor style="BACKGROUND-COLOR: #800000">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#008000')" class=Bcolor style="BACKGROUND-COLOR: #008000">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#000080')" class=Bcolor style="BACKGROUND-COLOR: #000080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#808000')" class=Bcolor style="BACKGROUND-COLOR: #808000">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#800080')" class=Bcolor style="BACKGROUND-COLOR: #800080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#008080')" class=Bcolor style="BACKGROUND-COLOR: #008080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#C0C0C0')" class=Bcolor style="BACKGROUND-COLOR: #c0c0c0">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#808080')" class=Bcolor style="BACKGROUND-COLOR: #808080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#9999FF')" class=Bcolor style="BACKGROUND-COLOR: #9999ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#993366')" class=Bcolor style="BACKGROUND-COLOR: #993366">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFFFCC')" class=Bcolor style="BACKGROUND-COLOR: #ffffcc">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#CCFFFF')" class=Bcolor style="BACKGROUND-COLOR: #ccffff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#660066')" class=Bcolor style="BACKGROUND-COLOR: #660066">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF8080')" class=Bcolor style="BACKGROUND-COLOR: #ff8080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#0066CC')" class=Bcolor style="BACKGROUND-COLOR: #0066cc">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#CCCCFF')" class=Bcolor style="BACKGROUND-COLOR: #ccccff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#000080')" class=Bcolor style="BACKGROUND-COLOR: #000080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF00FF')" class=Bcolor style="BACKGROUND-COLOR: #ff00ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFFF00')" class=Bcolor style="BACKGROUND-COLOR: #ffff00">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#00FFFF')" class=Bcolor style="BACKGROUND-COLOR: #00ffff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#800080')" class=Bcolor style="BACKGROUND-COLOR: #800080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#800000')" class=Bcolor style="BACKGROUND-COLOR: #800000">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#008080')" class=Bcolor style="BACKGROUND-COLOR: #008080">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#0000FF')" class=Bcolor style="BACKGROUND-COLOR: #0000ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#00CCFF')" class=Bcolor style="BACKGROUND-COLOR: #00ccff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#CCFFFF')" class=Bcolor style="BACKGROUND-COLOR: #ccffff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#CCFFCC')" class=Bcolor style="BACKGROUND-COLOR: #ccffcc">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFFF99')" class=Bcolor style="BACKGROUND-COLOR: #ffff99">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#99CCFF')" class=Bcolor style="BACKGROUND-COLOR: #99ccff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF99CC')" class=Bcolor style="BACKGROUND-COLOR: #ff99cc">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#CC99FF')" class=Bcolor style="BACKGROUND-COLOR: #cc99ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFCC99')" class=Bcolor style="BACKGROUND-COLOR: #ffcc99">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#3366FF')" class=Bcolor style="BACKGROUND-COLOR: #3366ff">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#33CCCC')" class=Bcolor style="BACKGROUND-COLOR: #33cccc">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#99CC00')" class=Bcolor style="BACKGROUND-COLOR: #99cc00">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FFCC00')" class=Bcolor style="BACKGROUND-COLOR: #ffcc00">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF9900')" class=Bcolor style="BACKGROUND-COLOR: #ff9900">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#FF6600')" class=Bcolor style="BACKGROUND-COLOR: #ff6600">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#666699')" class=Bcolor style="BACKGROUND-COLOR: #666699">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#969696')" class=Bcolor style="BACKGROUND-COLOR: #969696">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#003366')" class=Bcolor style="BACKGROUND-COLOR: #003366">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#339966')" class=Bcolor style="BACKGROUND-COLOR: #339966">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#003300')" class=Bcolor style="BACKGROUND-COLOR: #003300">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#333300')" class=Bcolor style="BACKGROUND-COLOR: #333300">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#993300')" class=Bcolor style="BACKGROUND-COLOR: #993300">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#993366')" class=Bcolor style="BACKGROUND-COLOR: #993366">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#333399')" class=Bcolor style="BACKGROUND-COLOR: #333399">
</BUTTON>
<BUTTON onclick="execCom('ForeColor','false','#333333')" class=Bcolor style="BACKGROUND-COLOR: #333333">
</BUTTON>
</DIV>
<SELECT onchange="execCom('fontName','false', this.value )" id=fname style="VISIBILITY: hidden" size=11>
<OPTION selected value=F-name>F-name</OPTION>
<OPTION value=arial>arial</OPTION>
<OPTION value=calibri>calibri</OPTION>
<OPTION value=algerian>algerian</OPTION>
<OPTION value=arialblack>arialblack</OPTION>
<OPTION value=aharoni>aharoni</OPTION>
<OPTION value=baskerville>baskerville</OPTION>
<OPTION value="comic sans ms">comic sans ms</OPTION>
<OPTION value=forte>forte</OPTION>
<OPTION value=georgia>georgia</OPTION>
<OPTION value=script>script</OPTION>
</SELECT>
<SELECT onchange="execCom('fontSize','false', this.value )" id=fsize style="VISIBILITY: hidden" size=7>
<OPTION selected value=1>1</OPTION>
<OPTION value=2>2</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=4>4</OPTION>
<OPTION value=5>5</OPTION>
<OPTION value=6>6</OPTION>
<OPTION value=7>7</OPTION>
</SELECT>
</body>
</html>

edit:
visiblement cei

Code css :

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

flex: 1 0 auto; -webkit-flex: 0 0 auto;

fonctionne je suis bien dans le body sauf que le overflow:auto ne fonction pas avec flex pour l'editeur et il me le faut sinon c'est tout le document qui monte au bout de x ligne hors je veux garder le pann visible

Invité · 05/02/2018, 09h05

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
* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
html {
  width: 100%;
  height: 100%;
  padding:0.5%;
}
body {
  display: flex; display: -webkit-flex;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  overflow:hidden;
}
#panne {
  position:fixed;
  width:99%;
  height: 40px; /* A ADAPTER aux pictos */
  background: #ccc;
}
#editeur {
  flex:1 1 auto;
  background: #eee;
  margin-top:40px; /* hauteur panne*/
  overflow:auto;
}

**patricktoulon** · 05/02/2018, 09h35

re
Bonjour Jreaux62 dans un html local ca a l'air de fonctionner correctement
esperons que sur mon suport ca marche aussi

merci
magic!! ce flex

**patricktoulon** · 05/02/2018, 09h51

re bon pour les support IE et l'OCX webbrowser de VBA sa fonctionne les boutons sont légèrement décalés vers le haut mais c'est un moindre mal
par contre j'ai un dernier soucis
quand je reduit ou augment la fentre les bouton etant en float left passent en dessous ce qui est voulu mais comment redimentionner le pann a cet effet

je l'ai mi a overflow:hidden et display :inline-block

demo du probleme
Nom : demo2.gif
Affichages : 193
Taille : 1,05 Mo

Nom : demo2.gif
Affichages : 193
Taille : 1,05 Mo

Invité · 05/02/2018, 11h02

Remplace height: 40px; par min-height: 40px;

Par contre, l'éditeur ne "suivra" pas.
Sauf avec un peu de Javascript (on load/resize) pour définir le margin-top de #editeur en fonction de la hauteur de #panne.

AUTRE solution (sans JS) : dupliquer le contenu de #panne (les images des pictos) dans un #panne2

https://codepen.io/jreaux62/pen/qxZepB

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
* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
html {
  width: 100%;
  height: 100%;
  padding:0.5%;
}
body {
  display: flex; display: -webkit-flex;
  flex-direction:column;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  overflow:hidden;
}
#panne {
  position:fixed;
  width:99%;
  overflow:hidden;
  padding:5px;
}
#panne2 {
  flex:0 0 auto;
  visibility:hidden; /* on masque */
  padding:5px; /* idem que panne */
}
#editeur {
  flex:1 1 auto;
  background: yellow;
  overflow:auto;
}

**patricktoulon** · 05/02/2018, 11h30

re
oui j'avais essayé entre temps le min-height mais en effet je n'avais pas le retour

alors j'ai ajouter le onresize dans body <body onresize="resizepann()">
j'ai ajouter la la classe "panlitle" a panne

pour les flex je les est mis dans deux classe de style differents

Code css :

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

1
2
3
4
5
6
7
8
.panlitle{
 flex: 0 0 30pt; -webkit-flex: 0 0 40px;
  height: 40px; /* A ADAPTER aux pictos */
}
.panbig{
 flex: 0 0 50pt; -webkit-flex: 0 0 70px;
  height: 70px; /* A ADAPTER aux pictos */
}

et dans mon js j'ai ajouté cette fonction

Code javascript :

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

1
2
3
4
5
6
7
function resizepann(){
    var w = window.outerWidth;
    var h = window.outerHeight;
    var pan=document.getElementById("panne");
    if(w<650){pan.className="panbig";} 
    if(w>650){pan.className="panlitle";} 
}

je rendrais le 650 dynamique en fonction du lastchild de panne avec son offset left pour le moment je n'ai pas encore TOUT mes boutons

Dimensionnement en "%" de la fenêtre

Dimensionnement en CSS

Partager

Partager