Div hauteur automatique sans dimension en absolu

Version imprimable

29/07/2014, 16h10
nilsb13

1 pièce(s) jointe(s)

Div hauteur automatique sans dimension en absolu

Bonjour la communauté !

Selon le schéma suivant :

Pièce jointe 152237

Comment faire pour tailler automatiquement en hauteur la div3.

Sachant que :
- La hauteur du corps de la fenêtre est inconnu.
- La hauteur des div 1, 2 et 4, sont adaptées automatiquement en fonction du contenu (donc hauteur inconnue).

J'ai beaucoup cherché, impossible de trouver quoique ce soit de valable.
Je ne veux pas attribuer de hauteur fixe à l'ensemble.
J'avais écris un petit script JS, qui bon an mal an, donnait le résultat escompté.
Cependant, j'aimerai beaucoup faire ça en CSS pure.

Des idées ?
Merci.
Nils.
29/07/2014, 16h19
s0h3ck
Bonjour nilsb13,
Vous n’auriez pas des codes à partager par hasard ? :aie:

Sans code, voici ce que je peux vous proposer :
- La propriété height : auto;
- La propriété overflow: hidden;
- Allez-vous renseigner sur les techniques de positionnement CSS (display et compagnie)
Merci de nous tenir au courant :D
s0h3ck

Bonjour s0h3ck,

(on se tutoie ?)

non, pas de code pour le moment, car je voudrais repartir de zéro sans mon script JS.

Mais ça pourrait ressembler à un truc comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
html, body {
width : 100%;
height : 100%; }
 
#div1 {
float : left;
width : 100%; }
 
#div2 {
float : left;
width : 100%; }
 
#div3 {
float : left;
width : 100%; 
quelque-chose-qui-va-bien : pour-tailler-la-div-à-lespace-restant;
overflow : auto }
 
#div4 {
float : left;
width : 100%; }

Le truc, c'est que je ne voudrais pas donner de hauteur fixe à un conteneur principal qui contiendrait les 4 div.
Bien sûr avec une hauteur fixe, c'est plus facile pour gérer les ascenseurs.

Mon code JS actuel, récupère la hauteur du corps du navigateur, des div 1, 2, 4, et fait la soustraction pour calculer la hauteur de la div 3.
Mais j'aimerais bien connaître une astuce pour faire ça en CSS.

Voilà un bout de code vite fait qui donne un aperçu de ce que ça pourrait être,
bien sûr, ça ne fonctionne pas.

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
<!DOCTYPE html>
<html lang="fr">
 
<head>
   <meta charset="utf-8">
 
   <style>
 
   body {   height   : 100%;
            width    : 100%; }
 
   #div1 {  width    : 100%;
            background-color : yellow; }
 
   #div2 {  width    : 100%;
            background-color : yellow; }
 
   #div3 {  width    : 100%;
            height   : auto;
            overflow : auto;
            background-color : green; }
 
   #div4 {  width    : 100%;
            background-color : yellow; }
 
   </style>
</head>
 
<body>
 
   <div id='div1'>
   quelque chose
   </div>
 
   <div id='div2'>
   quelque chose
   </div>
 
   <div id='div3'>
   beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />beacoup de choses qui déborde de l'écran<br />
   </div>
 
   <div id='div4'>
   quelque chose
   </div>
 
 
</body>
</html>

Pour le fun, voici mon code JavaScript, qui fonctionne, mais dont je voudrais me débarrasser ; je l'ai réutilisé en attendant mieux ...

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
//alert('0) début');
 
// 1) Récupérer la hauteur de la fenêtre
var hauteur_fenêtre = document.documentElement.offsetHeight;
//alert('1a) hauteur fenêtre : ' + hauteur_fenêtre); // ok
 
//alert('document.getElementsByTagName("body")[0] : ' + document.getElementsByTagName('body')[0].offsetHeight);
// ne donne pas la bonne valeur !, car la div de la liste n'a pas été encore retaillée
// du coup, dans le test on a 1505 au lieu de 718.
 
//alert('1b) document.documentElement.offsetHeight : ' + document.documentElement.offsetHeight); // ok
//alert('1c) window.innerHeight : ' + window.innerHeight); // ok
 
//2) Récupérer la hauteur des différents éléments affichés
var hauteur_div_menu_general =	document.getElementById('div_menu_general').offsetHeight;
//alert('2a) hauteur_div_menu_general' + hauteur_div_menu_general);
 
var hauteur_div_ajouter_rechercher	= document.getElementById('div_ajouter_rechercher').offsetHeight;
//alert('2b) hauteur_div_ajouter_rechercher' + hauteur_div_ajouter_rechercher);
 
var hauteur_div_boutons_ajouter_rechercher	= document.getElementById('div_boutons_ajouter_rechercher').offsetHeight;
//alert('2c) hauteur_div_boutons_ajouter_rechercher' + hauteur_div_boutons_ajouter_rechercher);
 
//var hauteur_div_separateur	= document.getElementById('div_separateur').offsetHeight;
//alert('hauteur_div_separateur' + hauteur_div_separateur);
 
var hauteur_div_boutons_résultat	= document.getElementById('div_boutons_resultat').offsetHeight;
//alert('2d) hauteur_div_boutons_résultat' + hauteur_div_boutons_résultat);
 
//3) Additionner la hauteur des différents éléments affichés
var hauteur_divs_sans_scroll =	hauteur_div_menu_general +
								hauteur_div_ajouter_rechercher +
								hauteur_div_boutons_ajouter_rechercher +
								//hauteur_div_separateur +
								hauteur_div_boutons_résultat;
//alert('3) hauteur_divs_sans_scroll' + hauteur_divs_sans_scroll);
 
//4) Soustraire la hauteur des éléments à la hauteur de la fenêtre
var hauteur_restante = hauteur_fenêtre - hauteur_divs_sans_scroll - 20 ;
//alert('4) hauteur_restante' + hauteur_restante);
 
//5) Affecter à la dernière div la différence entre les deux.
document.getElementById('div_resultat').style.height = hauteur_restante + 'px';

Merci ??? pour ta remarque [code=xxx], mais je vois que tu as déjà fait la modif.
C'est dommage que ta remarque ne reste pas affichée, ça peut donner des idées à d'autres, qui comme moi ne connaissent pas cet attribut de balise de forum.

30/07/2014, 18h31
s0h3ck

Citation:

(on se tutoie ?)

Je vouvoie parce que quelqu’un d’autre peut lire votre message et ainsi que toute la communauté. Je crois que dans ces cas-là le vouvoiement peut être plus approprié. Je n’ai pas particulière de préférence. Ce n’est pas un aspect qui m’agace vraiment. En ce sens, si vous voulez absolument que je vous tutoie, je le ferais pour respecter votre dignité personnelle. ;)

Citation:

Le truc, c'est que je ne voudrais pas donner de hauteur fixe à un conteneur principal qui contiendrait les 4 div.

Avant d’aller plus loin, avez-vous essayé les propositions du post #2 ?

J’ai jeté un coup d’œil au reste de votre message. Voici ma réflexion : on ne produit pas de code pour les autres, mais on aide les autres à produire un code. Tu comprends la différence très mince ? Du coup, poster un code HTML et CSS que vous avez réellement essayés et expliquer ce que vous croyez qui ne fonctionne pas.

Citation:

Merci ??? pour ta remarque [code=xxx], mais je vois que tu as déjà fait la modif.

Ne vous inquiétez pas. C’est un gentil modérateur qui a modifié votre code en utilisant la balise appropriée. D’ailleurs, comme c’est une remarque vous devriez maintenant connaitre l’annotation appropriée pour la prochaine fois. Cette balise permet de rendre les messages plus visibles pour tous les membres et ainsi que les visiteurs qui cherchent des solutions à leurs problèmes vraisemblables.
30/07/2014, 19h00
nilsb13

Merci s0h3ck pour toutes tes réponses (aller on se tutoie, il me semble que c'est fréquent dans le monde de l'informatique, et mes origines scandinaves font que je tutoies facilement, là bas, il n'y a guère que la reine qu'on vouvoie).

Oui, le post #2, j'ai essayé ... ; en fait ça fait "longtemps" que poste à ce sujet (la deuxième fois en fait) et que je fais des recherches en tout sens sans rien trouver d'intéressant.
Tout ce que j'ai pu trouver, se base sur un conteneur général à taille fixe, et là, tout devient plus facile. Ce qui n'est pas mon choix.

Je dois développer une nouvelle application web, et à cette occasion, j'ai reposté la question, à tout hasard.
Pour que ma nouvelle appli soit encore plus en CSS et moins en JS.

Mais je fini par croire que ce que je veux faire n'est pas possible en CSS pure.

Voilà, pourquoi, je n'ai pas de code à proposer pour débogage, mon code actuel est basé sur JS, et je n'ai pas conservé toutes les tentatives que j'ai pu faire, je me suis résigné à utiliser JS.

Oui, j'avoue, je cherche quelqu'un qui a déjà ça tout fait sous le coude, pas de code à proposer pour débogage.

En fait, l'ascenseur d'une div, ne peut s'allumer que si la div à une hauteur déterminée, sans cela, la div prend la taille de son contenu et l'ascenseur ne s'allume pas.

Donc, la question reste entière, comment faire pour qu'une div occupe l'espace restant (en CSS), sachant que les autres div ne sont pas taillée à une dimension particulière, vu qu'elles prennent la taille de leur contenu, et qu'on n'a pas non une div générale dont on connaît la hauteur.

En tout cas, merci pour tes propositions.
31/07/2014, 03h51
s0h3ck

1 pièce(s) jointe(s)

Citation:

Merci s0h3ck pour toutes tes réponses (aller on se tutoie, il me semble que c'est fréquent dans le monde de l'informatique, et mes origines scandinaves font que je tutoies facilement, là bas, il n'y a guère que la reine qu'on vouvoie).

:haha:

Revenons maintenant au sujet, j'ai vérifié votre code et tout semble correct à mon œil. Voici l'imprime écran dont les div s'ajuste au contenu (pris de votre code) :

Pièce jointe 152369

En ce sens, tu me dis que tu as toujours un souci. J'ai du mal à saisir votre problème alors. (Et oui, on voit dans l'imprime écran du code javascript, j'ai testé sans et avec, le résultat semble le même.)

Oui, le résultat est le même, car le code JS fait référence à des noms de div qui ne sont pas présents dans le code HTML fourni.

Voici une page complète (avec CSS et JS inclus) qui fonctionne, et qui te donnera un aperçu de ce que je chercher à faire.
Donc, le même résultat, mais sans le code JS en fin de page avec du CSS à la place.

(l'appli est en cours de dév. et la zone verte ne ressemble pas à la zone bleu parce que j'ai pas fini cette page, mais au niveau scroll c'est fini).

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
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
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="utf-8">
    <title>Qui es tu ?</title>
    <link rel="stylesheet" href="ressources/css/styles.css" type="text/css" />
    <STYLE type="text/css">
        <!-- html {
            height: 100%;
        }
        body {
            margin: 0px;
            padding: 5px;
            background-color: burlywood;
        }
        caption {
            font-size: 120%;
            font-weight: bold;
        }
        * {
            font-family: arial;
            font-size: 100%;
        }
        table {
            /*display				: inline;*/
            /*border-collapse		: collapse;*/
            /*border				: solid 2px Brown;*/
        }
        td,
        th {
            padding-left: 3px;
            padding-right: 3px;
        }
        th {
            text-align: right;
        }
        input,
        textarea {
            border-radius: 8px;
            padding-left: 4px;
            padding-right: 4px;
            padding-top: 3px;
            padding-bottom: 0px;
        }
        /* #div_corps_login { width				: 100%; border				: solid black 1px; text-align			: center; }  #div_corps_accueil { width				: 100%; border				: solid blue 1px; text-align			: center; } */
        #div_menu_general {
            padding: 3px;
        }
        #div_ajouter_rechercher {
            padding: 3px;
            background-color: DeepSkyBlue;
            text-align: left;
        }
        #div_ajouter_rechercher label {
            color: royalblue;
            font-weight: bold;
            /*normal*/
        }
        #div_ajouter_rechercher input {
            background-color: LightSkyBlue;
        }
        #div_ajouter_rechercher textarea {
            /* ne pas grouper avec le précédent (,) Firefox ne le gère pas.*/
            background-color: LightSkyBlue;
        }
        #div_ajouter_rechercher input:focus {
            /* ne pas grouper avec le précédent (,) Firefox ne le gère pas.*/
            background-color: black;
            color: white;
            outline: none;
        }
        #div_ajouter_rechercher textarea:focus {
            /* ne pas grouper avec le précédent (,) Firefox ne le gère pas.*/
            background-color: black;
            color: white;
            outline: none;
        }
        #div_boutons_ajouter_rechercher {
            padding: 3px;
            background-color: LightSkyBlue;
            border-bottom: solid 5px burlywood;
        }
        #div_boutons_resultat {
            padding: 3px;
            background-color: MediumAquaMarine;
        }
        #div_resultat {
            padding: 3px;
            background-color: MediumSeaGreen;
            overflow-y: auto;
            text-align: left;
        }
        #div_resultat label {
            color: DarkGreen;
        }
        #div_resultat input {
            background-color: MediumAquaMarine;
        }
        #div_resultat textarea {
            /* ne pas grouper avec le précédent (,) Firefox ne le gère pas.*/
            background-color: MediumAquaMarine;
        }
        #div_resultat input:focus {
            background-color: black;
            color: white;
            outline: none;
        }
        #div_resultat textarea:focus {
            /* ne pas grouper avec le précédent (,) Firefox ne le gère pas.*/
            background-color: black;
            color: white;
            outline: none;
        }
        .case_calendrier {
            text-align: center;
            border-collapse: separate;
            border: 2px solid green;
            vertical-align: top;
            width: 1%;
            /* il faut laisser le 1% sinon le tableau se ratatine */
            padding: 5px;
            /* border-spacing		: 10px;  ne sert à rien */
        }
        .texte_petit {
            font-size: 80%;
            font-family: arial;
        }
        .texte_normal_gras {
            font-weight: bold;
        }
        .texte_titre_block {
            display: block;
            font-weight: bold;
            padding: 10px;
        }
        .texte_titre_inline {
            display: inline;
            font-weight: bold;
            padding: 10px;
        }
        .message_derreur {
            color: red;
        }
        .encadrement_RO {
            border: solid grey 1px;
            padding-left: 3px;
            padding-right: 3px;
            background-color: lightgrey;
        }
        .bouton_block {
            display: block;
            border: 0px;
            padding: 3px;
            font-family: arial;
            color: blue;
            background-color: transparent;
            text-decoration: none;
            cursor: pointer;
        }
        .bouton_block:hover {
            color: white;
        }
        .bouton {
            border: 0px;
            padding-left: 8px;
            padding-right: 8px;
            font-family: arial;
            color: Brown;
            background-color: transparent;
            text-decoration: none;
            cursor: pointer;
        }
        .bouton:hover {
            color: white;
        }
        .bouton_selectionne {
            border: solid 2px Brown;
            border-radius: 8px;
            padding-left: 8px;
            padding-right: 8px;
            padding-top: 2px;
            font-family: arial;
            color: Brown;
            background-color: transparent;
            text-decoration: none;
            cursor: pointer;
        }
        -->
    </STYLE>
</head>
 
<body>
    <div id="div_menu_general"> <a href="http://localhost/CI/CI220_FMT1/index.php/ACCUEIL/accueil" class="bouton">Accueil</a><a href="http://localhost/CI/CI220_FMT1/index.php/BIENVENUE/bienvenue" class="bouton">Bienvenue</a><a href="http://localhost/CI/CI220_FMT1/index.php/QUI_ES_TU/qui_es_tu" class="bouton">Qui es tu ?</a><a href="http://localhost/CI/CI220_FMT1/index.php/CHAUFFEURS/chauffeurs" class="bouton_selectionne">Chauffeurs</a>
    </div>
    <form action="http://localhost/CI/CI220_FMT1/index.php/CHAUFFEURS/chauffeurs/traitement" method="post" accept-charset="utf-8">
        <div id="div_ajouter_rechercher">
            <table>
                <tr>
                    <td rowspan="9" align="center">
                        <label for="id_chauffeur">ID Chauffeur</label>
                        <br />
                        <input type="text" name="id_chauffeur" value="" maxlength="10" size="10" />
                    </td>
                    <th>
                        <label for="civilite">Monsieur</label>
                    </th>
                    <td>
                        <input type="radio" name="civilite" value="Monsieur" />
                    </td>
                    <th>
                        <label for="email">Email</label>
                    </th>
                    <td>
                        <input type="email" name="email" value="" maxlength="100" size="50" />
                    </td>
                </tr>
                <tr>
                    <th>
                        <label for="civilite">Madame</label>
                    </th>
                    <td>
                        <input type="radio" name="civilite" value="Madame" />
                    </td>
                    <th>
                        <label for="tel_mobile">Tél. mobile</label>
                    </th>
                    <td>
                        <input type="text" name="tel_mobile" value="" maxlength="14" size="14" />
                    </td>
                </tr>
                <tr>
                    <th>
                        <label for="prenom">Prénom</label>
                    </th>
                    <td>
                        <input type="text" name="prenom" value="" maxlength="50" size="50" />
                    </td>
                    <th>
                        <label for="tel_fixe">Tél. fixe</label>
                    </th>
                    <td>
                        <input type="text" name="tel_fixe" value="" maxlength="14" size="14" />
                    </td>
                </tr>
                <tr>
                    <th>
                        <label for="nom">Nom</label>
                    </th>
                    <td>
                        <input type="text" name="nom" value="" maxlength="50" size="50" />
                    </td>
                    <th>
                        <label for="tel_FMT">Tél. FMT</label>
                    </th>
                    <td>
                        <input type="text" name="tel_FMT" value="" maxlength="14" size="14" />
                    </td>
                </tr>
                <tr>
                    <th>
                        <label for="adresse">Adresse</label>
                    </th>
                    <td>
                        <textarea name="adresse" cols="50" rows="2"></textarea>
                    </td>
                    <th>
                        <label for="date_naissance">Date de naissance</label>
                    </th>
                    <td>
                        <input type="date" name="date_naissance" value="" />
                    </td>
                </tr>
                <tr>
                    <th>
                        <label for="ville">Ville</label>
                    </th>
                    <td>
                        <input type="text" name="ville" value="" maxlength="50" size="50" />
                    </td>
                    <th>
                        <label for="ville_pays_naissance">Ville (Pays) de naissance</label>
                    </th>
                    <td>
                        <input type="text" name="ville_pays_naissance" value="" maxlength="100" size="50" />
                    </td>
                </tr>
                <tr>
                    <th>
                        <label for="CP">CP</label>
                    </th>
                    <td>
                        <input type="text" name="CP" value="" maxlength="6" size="6" />
                    </td>
                    <th>
                        <label for="num_secu">N° Sécurité Sociale</label>
                    </th>
                    <td>
                        <input type="text" name="num_secu" value="" maxlength="15" size="15" />
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <td></td>
                    <th>
                        <label for="numero_permis_ADR">N° permis ADR</label>
                    </th>
                    <td>
                        <input type="text" name="numero_permis_ADR" value="" maxlength="16" size="16" />
                    </td>
                </tr>
                <tr>
                    <th>
                        <label for="numero_permis_conduire">N° permis de conduire</label>
                    </th>
                    <td>
                        <input type="text" name="numero_permis_conduire" value="" maxlength="12" size="12" />
                    </td>
                    <th>
                        <label for="date_fin_ADR">Date Fin ADR</label>
                    </th>
                    <td>
                        <input type="date" name="date_fin_ADR" value="" />
                    </td>
                </tr>
            </table>
        </div>
        <div id="div_boutons_ajouter_rechercher">
            <input type="submit" name="action" value="Ajouter" class="bouton" />
            <input type="submit" name="action" value="Rechercher" class="bouton" />
            <input type="submit" name="action" value="Effacer" class="bouton" />
        </div>
        <div id="div_boutons_resultat">4 enregistrements
            <input type="submit" name="action" value="Modifier" class="bouton" />
            <input type="submit" name="action" value="Supprimer" class="bouton" />
        </div>
        <div id="div_resultat">
            <label for="id_chauffeur">ID Chauffeur 1</label>
            <input type="radio" name="id_chauffeur" value="1" />
            <label for="civilite">Monsieur</label>
            <input type="radio" name="civilite1" value="Monsieur" checked="checked" />
            <label for="civilite">Madame</label>
            <input type="radio" name="civilite1" value="Monsieur" />
            <label for="prenom">Prénom</label>
            <input type="text" name="prenom1" value="" maxlength="50" size="50" />
            <label for="nom">Nom</label>
            <input type="text" name="nom1" value="" maxlength="50" size="50" />
            <label for="adresse">Adresse</label>
            <textarea name="adresse1" cols="50" rows="2"></textarea>
            <label for="ville">Ville</label>
            <input type="text" name="ville1" value="" maxlength="50" size="50" />
            <label for="CP">CP</label>
            <input type="text" name="CP1" value="" maxlength="6" size="6" />
            <label for="email">Email</label>
            <input type="email" name="email1" value="" maxlength="200" size="200" />
            <label for="tel_FMT">Tél. FMT</label>
            <input type="text" name="tel_FMT1" value="" maxlength="14" size="14" />
            <label for="tel_fixe">Tél. fixe</label>
            <input type="text" name="tel_fixe1" value="" maxlength="14" size="14" />
            <label for="tel_mobile">Tél. mobile</label>
            <input type="text" name="tel_mobile1" value="" maxlength="14" size="14" />
            <label for="num_secu">N° Sécurité Sociale</label>
            <input type="text" name="num_secu1" value="" maxlength="15" size="15" />
            <label for="date_naissance">Date de naissance</label>
            <input type="date" name="date_naissance1" value="" />
            <label for="ville_pays_naissance">Ville (Pays) de naissance</label>
            <input type="text" name="ville_pays_naissance1" value="" maxlength="100" size="100" />
            <label for="numero_permis_conduire">N° permis de conduire</label>
            <input type="text" name="numero_permis_conduire1" value="" maxlength="12" size="12" />
            <label for="numero_permis_ADR">N° permis ADR</label>
            <input type="text" name="numero_permis_ADR1" value="" maxlength="16" size="16" />
            <label for="date_fin_ADR">Date Fin ADR</label>
            <input type="date" name="date_fin_ADR1" value="" />
            <hr />
            <label for="id_chauffeur">ID Chauffeur 2</label>
            <input type="radio" name="id_chauffeur" value="2" />
            <label for="civilite">Monsieur</label>
            <input type="radio" name="civilite2" value="Madame" />
            <label for="civilite">Madame</label>
            <input type="radio" name="civilite2" value="Madame" checked="checked" />
            <label for="prenom">Prénom</label>
            <input type="text" name="prenom2" value="" maxlength="50" size="50" />
            <label for="nom">Nom</label>
            <input type="text" name="nom2" value="" maxlength="50" size="50" />
            <label for="adresse">Adresse</label>
            <textarea name="adresse2" cols="50" rows="2"></textarea>
            <label for="ville">Ville</label>
            <input type="text" name="ville2" value="" maxlength="50" size="50" />
            <label for="CP">CP</label>
            <input type="text" name="CP2" value="" maxlength="6" size="6" />
            <label for="email">Email</label>
            <input type="email" name="email2" value="" maxlength="200" size="200" />
            <label for="tel_FMT">Tél. FMT</label>
            <input type="text" name="tel_FMT2" value="" maxlength="14" size="14" />
            <label for="tel_fixe">Tél. fixe</label>
            <input type="text" name="tel_fixe2" value="" maxlength="14" size="14" />
            <label for="tel_mobile">Tél. mobile</label>
            <input type="text" name="tel_mobile2" value="" maxlength="14" size="14" />
            <label for="num_secu">N° Sécurité Sociale</label>
            <input type="text" name="num_secu2" value="" maxlength="15" size="15" />
            <label for="date_naissance">Date de naissance</label>
            <input type="date" name="date_naissance2" value="" />
            <label for="ville_pays_naissance">Ville (Pays) de naissance</label>
            <input type="text" name="ville_pays_naissance2" value="" maxlength="100" size="100" />
            <label for="numero_permis_conduire">N° permis de conduire</label>
            <input type="text" name="numero_permis_conduire2" value="" maxlength="12" size="12" />
            <label for="numero_permis_ADR">N° permis ADR</label>
            <input type="text" name="numero_permis_ADR2" value="" maxlength="16" size="16" />
            <label for="date_fin_ADR">Date Fin ADR</label>
            <input type="date" name="date_fin_ADR2" value="" />
            <hr />
            <label for="id_chauffeur">ID Chauffeur 5</label>
            <input type="radio" name="id_chauffeur" value="5" />
            <label for="civilite">Monsieur</label>
            <input type="radio" name="civilite5" value="Monsieur" checked="checked" />
            <label for="civilite">Madame</label>
            <input type="radio" name="civilite5" value="Monsieur" />
            <label for="prenom">Prénom</label>
            <input type="text" name="prenom5" value="aa" maxlength="50" size="50" />
            <label for="nom">Nom</label>
            <input type="text" name="nom5" value="" maxlength="50" size="50" />
            <label for="adresse">Adresse</label>
            <textarea name="adresse5" cols="50" rows="2"></textarea>
            <label for="ville">Ville</label>
            <input type="text" name="ville5" value="" maxlength="50" size="50" />
            <label for="CP">CP</label>
            <input type="text" name="CP5" value="" maxlength="6" size="6" />
            <label for="email">Email</label>
            <input type="email" name="email5" value="" maxlength="200" size="200" />
            <label for="tel_FMT">Tél. FMT</label>
            <input type="text" name="tel_FMT5" value="" maxlength="14" size="14" />
            <label for="tel_fixe">Tél. fixe</label>
            <input type="text" name="tel_fixe5" value="" maxlength="14" size="14" />
            <label for="tel_mobile">Tél. mobile</label>
            <input type="text" name="tel_mobile5" value="" maxlength="14" size="14" />
            <label for="num_secu">N° Sécurité Sociale</label>
            <input type="text" name="num_secu5" value="" maxlength="15" size="15" />
            <label for="date_naissance">Date de naissance</label>
            <input type="date" name="date_naissance5" value="" />
            <label for="ville_pays_naissance">Ville (Pays) de naissance</label>
            <input type="text" name="ville_pays_naissance5" value="" maxlength="100" size="100" />
            <label for="numero_permis_conduire">N° permis de conduire</label>
            <input type="text" name="numero_permis_conduire5" value="" maxlength="12" size="12" />
            <label for="numero_permis_ADR">N° permis ADR</label>
            <input type="text" name="numero_permis_ADR5" value="" maxlength="16" size="16" />
            <label for="date_fin_ADR">Date Fin ADR</label>
            <input type="date" name="date_fin_ADR5" value="" />
            <hr />
            <label for="id_chauffeur">ID Chauffeur 6</label>
            <input type="radio" name="id_chauffeur" value="6" />
            <label for="civilite">Monsieur</label>
            <input type="radio" name="civilite6" value="Madame" />
            <label for="civilite">Madame</label>
            <input type="radio" name="civilite6" value="Madame" checked="checked" />
            <label for="prenom">Prénom</label>
            <input type="text" name="prenom6" value="bb" maxlength="50" size="50" />
            <label for="nom">Nom</label>
            <input type="text" name="nom6" value="" maxlength="50" size="50" />
            <label for="adresse">Adresse</label>
            <textarea name="adresse6" cols="50" rows="2"></textarea>
            <label for="ville">Ville</label>
            <input type="text" name="ville6" value="" maxlength="50" size="50" />
            <label for="CP">CP</label>
            <input type="text" name="CP6" value="" maxlength="6" size="6" />
            <label for="email">Email</label>
            <input type="email" name="email6" value="" maxlength="200" size="200" />
            <label for="tel_FMT">Tél. FMT</label>
            <input type="text" name="tel_FMT6" value="" maxlength="14" size="14" />
            <label for="tel_fixe">Tél. fixe</label>
            <input type="text" name="tel_fixe6" value="" maxlength="14" size="14" />
            <label for="tel_mobile">Tél. mobile</label>
            <input type="text" name="tel_mobile6" value="" maxlength="14" size="14" />
            <label for="num_secu">N° Sécurité Sociale</label>
            <input type="text" name="num_secu6" value="" maxlength="15" size="15" />
            <label for="date_naissance">Date de naissance</label>
            <input type="date" name="date_naissance6" value="" />
            <label for="ville_pays_naissance">Ville (Pays) de naissance</label>
            <input type="text" name="ville_pays_naissance6" value="" maxlength="100" size="100" />
            <label for="numero_permis_conduire">N° permis de conduire</label>
            <input type="text" name="numero_permis_conduire6" value="" maxlength="12" size="12" />
            <label for="numero_permis_ADR">N° permis ADR</label>
            <input type="text" name="numero_permis_ADR6" value="" maxlength="16" size="16" />
            <label for="date_fin_ADR">Date Fin ADR</label>
            <input type="date" name="date_fin_ADR6" value="" />
            <hr />
        </div>
    </form>
</body>
<script type="text/javascript">
    //alert('0) début');
 
    // 1) Récupérer la hauteur de la fenêtre
    var hauteur_fenêtre = document.documentElement.offsetHeight;
    //alert('1a) hauteur fenêtre : ' + hauteur_fenêtre); // ok
 
    //alert('document.getElementsByTagName("body")[0] : ' + document.getElementsByTagName('body')[0].offsetHeight);
    // ne donne pas la bonne valeur !, car la div de la liste n'a pas été encore retaillée
    // du coup, dans le test on a 1505 au lieu de 718.
 
    //alert('1b) document.documentElement.offsetHeight : ' + document.documentElement.offsetHeight); // ok
    //alert('1c) window.innerHeight : ' + window.innerHeight); // ok
 
    //2) Récupérer la hauteur des différents éléments affichés
    var hauteur_div_menu_general = document.getElementById('div_menu_general').offsetHeight;
    //alert('2a) hauteur_div_menu_general' + hauteur_div_menu_general);
 
    var hauteur_div_ajouter_rechercher = document.getElementById('div_ajouter_rechercher').offsetHeight;
    //alert('2b) hauteur_div_ajouter_rechercher' + hauteur_div_ajouter_rechercher);
 
    var hauteur_div_boutons_ajouter_rechercher = document.getElementById('div_boutons_ajouter_rechercher').offsetHeight;
    //alert('2c) hauteur_div_boutons_ajouter_rechercher' + hauteur_div_boutons_ajouter_rechercher);
 
    //var hauteur_div_separateur        = document.getElementById('div_separateur').offsetHeight;
    //alert('hauteur_div_separateur' + hauteur_div_separateur);
 
    var hauteur_div_boutons_résultat = document.getElementById('div_boutons_resultat').offsetHeight;
    //alert('2d) hauteur_div_boutons_résultat' + hauteur_div_boutons_résultat);
 
    //3) Additionner la hauteur des différents éléments affichés
    var hauteur_divs_sans_scroll = hauteur_div_menu_general +
        hauteur_div_ajouter_rechercher +
        hauteur_div_boutons_ajouter_rechercher +
        //hauteur_div_separateur +
        hauteur_div_boutons_résultat;
    //alert('3) hauteur_divs_sans_scroll' + hauteur_divs_sans_scroll);
 
    //4) Soustraire la hauteur des éléments à la hauteur de la fenêtre
    var hauteur_restante = hauteur_fenêtre - hauteur_divs_sans_scroll - 18; // 18 pour ajuster en bas de la page.
    //alert('4) hauteur_restante' + hauteur_restante);
 
    //5) Affecter à la dernière div la différence entre les deux.
    document.getElementById('div_resultat').style.height = hauteur_restante + 'px';
</script>
 
</html>

31/07/2014, 20h23
NoSmoking

Bonjour,
as tu regardé du coté de flexBox si tu peux utiliser le CSS3?
01/08/2014, 00h22
NoSmoking
Re,
l'exercice étant intéressant je m'y suis penché (sans tombé)...

Résultats :
- CSS3 Flexbox, en CSS3 en utilisant les flexBox.
- JS 4 Flexbox, en javascript mais avec un autre positionnement que celui que tu utilises.
01/08/2014, 03h54
nilsb13

Salut NoSmoking,

et oui, à force de recherches, j'ai vu passé flexbox, mais ... oups, je n'ai pas eu le courage de m'y jeter (peur de tomber).
Je ne voyais pas par quel bout prendre le truc. Un apprentissage à faire en partant de zéro.
(Et en attendant, j'avais toujours mon JS qui fonctionnait et surtout mon appli à développer.)

Mais voilà, tu es passé par là et tu me donnes la solution.
Mille Mille Mille MERCI !!!

J'ai récupéré ton code, et l'intégrerai à mon appli dans les jours qui viennent.

Oui, j'ai le choix de CSS3 (et HTML5) pour mon appli, je suis seul développeur et mon client n'est pas exigeant côté navigateur.
Etant donné que c'est une appli privée et non pas un site public, je pourrai imposer le navigateur qui sera Chromium, car pour le moment Firefox ne gère pas la balise date.
Etant sous Linux, impossible de tester avec IE, mais bon ...

Et d'après ce que j'ai pu comprendre, je pourrai adapter ton code flexbox pour la mise en page "smartphone/tablet", car mon appli devra aussi être accessible sur smartphone, mais ce sera pour plus tard ...

Dis ?, tu la laisses en ligne ta démo ! hein, elle est trop chouette !

.../...

Bien, je viens de lire ton code, ben, oups, rien compris aux parties flexbox, y a du pain sur la planche !
Est-ce que je peux te questionner sur ton code, ou c'est abuser ?
(Mais j'imagine qu'il va falloir quand même que j'aille fouiller le net avant)
01/08/2014, 04h18
s0h3ck

@nilsb13

Pas besoin d'aller chercher si loin... :aie:
1. Bien lire le lien vers W3C dans le post #8.
2. Avez-vous regardé le code source de la page de l'exemple dans le post #9? :twisted:
3. Est-ce que c'est résolu ?
01/08/2014, 14h46
nilsb13

s0h3ck,

oui oui, j'ai bien vu tout les liens, et lu le code de NoSmoking, comme je l'ai dit plus haut.
Reste, que ça fait un gros morceau d'apprentissage, mais bon, faudra bien y passer !

Et oui, j'ai oublié de marquer que c'était résolu, je le fait de suite.

Mise en page désirée, résolue par FlexBox, solution donnée par NoSmoking.

Merci à tous pour votre aide !
Nils.
01/08/2014, 18h49
NoSmoking

5 pièce(s) jointe(s)

Les flexBox, une approche simple...
Je vais essayer de te simplifier la vision que tu as des flexBox

En partant d'une structure HTML standard suivante
Code:

1 2 3 4 5 6 <div class="conteneur_flex"> <div>Content 1</div> <div>Content 2</div> <div>Content 3</div> <div>Content 4</div> </div>
on commence par déclarer le CSS du conteneur comme ceci (voir la documentation pour la signification de chaque propriété)
Code:

1 2 3 4 .conteneur_flex { display:flex; flex-direction:column; }
dans ce cas les éléments n'occupent que la place nécessaire à leur contenu, pas grand intérêt.

Pièce jointe 152563

Maintenant mettons le CSS suivant sur l'item #3
Code:

1 2 3 .item_flex_expand { flex: 1 1 auto; }
on obtient le rendu suivant

Pièce jointe 152564
super, l'élément #3 occupe la place restante du conteneur.

Si l'on ajoute un élément l'item #3 verra sa place réduire, il y a moins d'espace disponible dans le conteneur.

Pièce jointe 152565

de même si l'on supprime un élément, l'item #3 verra sa place augmenter, il y a plus d'espace disponible dans le conteneur.

Pièce jointe 152566

Si deux éléments sont en flex: 1 1 auto, ils se partageront l'espace restant du conteneur

Pièce jointe 152567

de même si tous les item_flex sont en flex: 1 1 auto, ils se partageront l'espace du conteneur.

Attention c'est l'espace restant du conteneur qui est partagé entre les différents éléments.

Voilà pour une première approche simple voir simpliste :aie:

pour finir il existe également Redécouvrez la mise en page avec Flexbox simple d’abord.
02/08/2014, 08h51
nilsb13

Merci NoSmoking pour ce joli tuto.

Me reste plus qu'à l'étudier en profondeur, y compris le lien fourni.

Je crois que je vais aussi passer mes <table> de données de résultat en flexbox, apparemment c'est ce qu'il faut utiliser dorénavant.
Surtout pour avoir quelque chose de propre aussi sur smartphone ou tablet.
04/08/2014, 20h45
nilsb13
No Smoking,

et bien voilà, j'ai passé une de mes pages avec ta mise en forme, ça marche nickel.

Un peu galère et quelque réglages à faire, car j'ai une balise <form></form> qui englobe tout.
Du coup, j'ai passé ton CSS de #page à ma form, ça fonctionne.

Par contre, ce code que tu as fourni, (essayé sans la mise en remarque), ne change rien à la présentation, que l'on active l'une ou l'autre des 2 options :
Code:

1 2 3 4 5 6 /* div { activer l'une ou l'autre des options ne change rien box-sizing: border-box; box-sizing: content-box; } */
Que pensais tu que ça ferait ?

Je suis allé voir le "try it yourself" de W3school, ça positionne les div à côté ou en dessous, l'une de l'autre (dans l'exemple W3school).
Il semblerait que ça n'est aucune incidence avec flex-box.
05/08/2014, 13h46
NoSmoking

Citation:

Que pensais tu que ça ferait ?

Rien pour cet exemple :oops: c'est issu d'un copier/coller que j'ai mal épuré!
05/08/2014, 13h51
nilsb13

Ha ok, tu me rassures,
donc, normal qu'il y ait d'autres trucs que j'ai enlevés,
et je crois que je vais pouvoir en enlever encore, comme les position absolute, je vais tester ... et enlever (/* ... */) tout ce qui ne semble pas avoir d'incidence.

Et là, je me lance dans la transformation de ma table de résultat en flex-box ...
05/08/2014, 14h02
NoSmoking

Il est tout à fait normal que tu réajustes suivant ton besoin, sachant qu'ayant fait les 2 exemples en même temps pour avoir le même rendu certaines propriétés ne sont pas forcément nécessaires dans les deux cas.

Mais si tu testes en épurant tu ne devrais pas avoir de problème. ;)