Discussion :

[denisduval75]

Bonjour,
Dans une page xhtml, je souhaite afficher un tableau qui occuperait toute la hauteur disponible et ce quelque soit la résolution de l'écran de l'utilisateur.
Actuellement je teste en dur chaque résolution, mais je préfèrerais une 'formule' de calcul qui s'appliquerait à toute résolution.
Le problème aussi est que je ne peux évidemment pas tester les résolutions des écrans autres que le mien.
De plus la hauteur du tableau diffère selon la résolution : j'ai un écart de 22px entre la résolution 800x600 et 1920x1080 par exemple.
Je ne sais pas comment m'y prendre.
Avez-vous une idée ? Un tuto peut être sur le sujet ?
Merci pour votre aide.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
if (Integer.parseInt(getPageHauteur()) < 504) {
            setTableauFonctionnementDepenseHauteur("58%");
        } else {
            if (Integer.parseInt(getPageHauteur()) < 507) {
                setTableauFonctionnementDepenseHauteur("60%");
            } else {
                if (Integer.parseInt(getPageHauteur()) < 530) {
                    setTableauFonctionnementDepenseHauteur("64%");
                } else {
                    if (Integer.parseInt(getPageHauteur()) < 572) {
                        setTableauFonctionnementDepenseHauteur("66%");
                    } else {
                        if (Integer.parseInt(getPageHauteur()) < 582) {
                            setTableauFonctionnementDepenseHauteur("71%");
                        } else {
                            if (Integer.parseInt(getPageHauteur()) < 590) {
                                setTableauFonctionnementDepenseHauteur("72%");
                            } else {
                                if (Integer.parseInt(getPageHauteur()) < 609) {
                                    setTableauFonctionnementDepenseHauteur("73%");
                                } else {
                                    if (Integer.parseInt(getPageHauteur()) < 610) {
                                        setTableauFonctionnementDepenseHauteur("74%");
                                    } else {
                                        if (Integer.parseInt(getPageHauteur()) < 657) {
                                            setTableauFonctionnementDepenseHauteur("76%");
                                        } else {
                                            if (Integer.parseInt(getPageHauteur()) < 658) {
                                                setTableauFonctionnementDepenseHauteur("80%");
                                            } else {
                                                if (Integer.parseInt(getPageHauteur()) < 689) {
                                                    setTableauFonctionnementDepenseHauteur("82%");
                                                } else {
                                                    if (Integer.parseInt(getPageHauteur()) < 710) {
                                                        setTableauFonctionnementDepenseHauteur("58%");
                                                    } else {
                                                        if (Integer.parseInt(getPageHauteur()) < 730) {
                                                            setTableauFonctionnementDepenseHauteur("89%");
                                                        } else {
                                                            if (Integer.parseInt(getPageHauteur()) < 753) {
                                                                setTableauFonctionnementDepenseHauteur("92%");
                                                            } else {
                                                                if (Integer.parseInt(getPageHauteur()) < 754) {
                                                                    setTableauFonctionnementDepenseHauteur("95%");
                                                                } else {
                                                                    if (Integer.parseInt(getPageHauteur()) < 789) {
                                                                        setTableauFonctionnementDepenseHauteur("95%");
                                                                    } else {
                                                                        setTableauFonctionnementDepenseHauteur(null);
                                                                    }

[OButterlin]

Pourquoi ne pas passer par des calculs du genre

Code :

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

1
2
 
height:calc(100vh - hauteurTop - hauteurBottom);

(avec hauteurTop et hauteurBottom en px, si besoin...)

vh = viewport height