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

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)

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 ?

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é