8348 sujets

Développement web côté serveur, CMS

Boujour,
Dans un projet web et 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 plus grand que le mien, et 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.
Avez-vous une idée ? Un tuto peut être sur le sujet ?
Merci pour votre aide.

Voici mon code actuel. Selon la résolution, je détermine la hauteur du tableau en % de la page :

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);
                                                                    }
                                                                }        }

Modifié par denisduval75 (01 May 2021 - 08:35)
Modérateur
Bonjour,

Ton code ne nous dit pas grand chose sortit de son contexte.

Coté style, as tu essayé d'inscrire ton tableau dans une mise en forme en grid ou flex ?
Cela te permettrais d'utiliser table {height:100%;} sans avoir recours à du JavaScript .

Voici un exemple basique : https://codepen.io/gc-nomade/pen/YzNoaOr Ce n'est probablement pas la structure de ta page ni de celle de ton tableau (à toi de clarifier) , mais tu peut constater que le tableau prend tout l'espace de son parent, voilà donc une piste.

cdt
Meilleure solution