[Résolu] Hauteur en pixels selon la résolution écran

Bonjour.
Dans une page XHTML j'affiche un tableau et j'ai besoin de connaitre la hauteur de ce tableau depuis le bord haut de l'écran.
Pour cela j'affiche en superposition une div :

<div style="position: absolute; top: 0; width: 1px; height: 1300px; border:1px solid red"/>

1300px est la hauteur correcte depuis le bord haut pour ma résolution.
Mais si je change de résolution, la div s'arrête soit avant le bas du tableau, soit après.
C'est comme si un pixel avait des dimensions différentes selon la résolution !
Pouvez-vous m'aider à comprendre ?
Merci.

Hello,

Tu parles bien de changer de Résolution (en dpi par exemple) et non pas changer de Définition (1600x1300px par exemple) ?

Dans le premier cas effectivement, un pixel varie selon la Résolution (cf. explications ici : https://www.alsacreations.com/article/lire/1490-Comprendre-le-Viewport-dans-le-Web-mobile.html)

Dans le 2e cas, ... c'est également logique que si ton écran fait 1600x1300px au départ et qu'il passe à autre chose, eh bien il n'occupera plus 1300px de haut et donc ton élément div n'occupera plus la même surface.

EDIT : si tu souhaites que ton div occupe toujours exactement toute la hauteur de la fenêtre de ton navigateur, tu peux lui indiquer un "height: 100vh" (explications : https://www.alsacreations.com/astuce/lire/51-hauteur-100-element.html)
Modifié par Raphael (11 Jul 2022 - 16:13)

Merci pour cette réponse rapide mais je ne parviens à afficher le contenu des liens
J'ai le message :

Erreur
The URI you submitted has disallowed characters.
Pas de panique, ce n'est qu'un bug, n'est-ce pas ?

C'est OK maintenant.
Merci beaucoup pour ces infos.

J'ai le même problème avec en javascript :

document.documentElement.scrollHeight

J'avoue être perdu et je ne sais pas comment faire.
Pouvez-vous m'aider SVP ?
MERCI
Modifié par denisduval75 (13 Jul 2022 - 08:44)

Hello,

Je n'ai toujours pas compris exactement ce que tu veux faire.

Si tu veux adapter ton design à la hauteur de l'écran (ou la fenêtre) via JavaScript, il faut utiliser la méthode matchMedia si tu veux avoir exactement le même critère qu'en CSS :
https://raphaelgoetter.wordpress.com/2014/06/22/les-largeurs-en-javascript/

Dans ton cas ce serait (par exemple pour tester une hauteur minimum de 640px) :

window.matchMedia("(min-height: 640px)").matches

Hello.
Voici en fait ce que souhaite faire. J'aurai dû commencer par là !

Sur une page j'affiche un grand tableau suivi de 6 graphiques chartJS pour ne pas les nommer.
Sur la page j'ai donc bien un scrollbar à droite.

Moi je souhaite afficher les éléments comme ceci :
un tableau avec une marge gauche ET DROITE de 10px puis le scrollbar.
Mais ce n'est pas ce que j'obtiens. J'ai : le tableau avec une marge gauche de 10px, mais une marge droite de 1 ou 2 px puis le scrollbar. En fait le scrollbar s'affiche par dessus la marge de droite.

Si je veux une marge droite de 10px, je suis obligé (je n'ai pas trouvé mieux) de positionner une div dont la hauteur doit être suffisamment grande pour 'forcer' le scrollbar.

J'ai l'impression qu'il y a 2 types de scrollbar : un scrollbar géré par la page elle-même, et un scrollbar façon windows si la page n'a pas positionné de scrollbar.

Voila j'espère être lisible. Une dernière chose : les graphiques sont en position absolute.

MERCI.
Modifié par denisduval75 (13 Jul 2022 - 15:57)

Euhm, toujours pas sûr d'avoir compris.
Les graphiques sont dans le tableau ? Sous le tableau ?
La scrollbar ne doit apparaître que sur les côtés du tableau ? Pas des graphiques ?

C'est possible d'illustrer ton problème ?

Désolé !
Les graphiques sont au dessous du tableau.
La scrollbar doit être normale sur la page (le long du tableau et des graphiques.)
Modifié par denisduval75 (14 Jul 2022 - 06:35)

Modifié par denisduval75 (14 Jul 2022 - 06:41)

Bonjour,

La scrollbar est en principe dessinée par html et fait environ 1em de large ... (selon navigateur, résolution et éventuellement styles spécifiques).

Pour dégager cette partie, un padding à droite de valeur à peu près équivalente (sur html ou body) devrait repousser les contenus de celle-ci.

Un tableau voit sa largeur dépendre du contenu sauf si table-layout repris avec width . Si width, prendre en compte/ réduire d'autant cette largeur que la marge à droite.

Pour simplifier, je tenterais un :

body{
margin:0;
box-sizing:border-box;
max-width:100%;
padding-inline:10px;
}

Ce qui permettrait de donner un width :100% au tableau sans marges extérieures.

Cdt

Edit: Pour forcer la scrollbar sur html, il y a overflow:scroll ou min-height: 101%.

Re-edit démonstration/test https://codepen.io/gc-nomade/pen/abYBpOP (commenter/décommenter overflow-x:scroll )
Modifié par gcyrillus (14 Jul 2022 - 14:11)

Bonjour et merci pour cette réponse.
Du coup je déclare un min-height à 101% en deçà d'une certaine résolution (lorsque le scrollbar est nécessaire) et ça marche très bien.
Merci beaucoup pour cette idée simple mais redoutable d'efficacité