mesurer la hauteur d'une div (Opera Dev déconne ???)
6 réponses
Une Bévue
soit une div, si je mesure sa hauteur sur Safari, Firefox, Chrome, Opera
Developer par :
#offsetHeight
#clientHeight
#scrollHeight
#getBoundingClientRect().height
il n'y pas de scroller horizontal.
j'obtiens la même valeur (excepté le fait que qqfois
#getBoundingClientRect().height est outrageusement trop précis)
Mais pour un seul navigateur, la mesure est - fausse - d'environ 30px en
moins (?).
Vous avez déjà rencontré ça ?
Et pourquoi Opera serait différent de Chrome, qui a le même moteur ?
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
SAM
Le 19/12/14 09:20, Une Bévue a écrit :
soit une div, si je mesure sa hauteur sur Safari, Firefox, Chrome, Opera
(snip)
Et pourquoi Opera serait différent de Chrome, qui a le même moteur ?
sans un exemple en ligne comment constater par nous-même ce phénomène ? (peut-être autant c'est une poussière ailleurs que dans cette div qui trouble "ton" navigateur ?)
voir : <http://www.quirksmode.org/dom/w3c_cssom.html> ? qui semble pourtant ne pas rapporter de problème ...
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Le 19/12/14 09:20, Une Bévue a écrit :
soit une div, si je mesure sa hauteur sur Safari, Firefox, Chrome, Opera
(snip)
Et pourquoi Opera serait différent de Chrome, qui a le même moteur ?
sans un exemple en ligne comment constater par nous-même ce phénomène ?
(peut-être autant c'est une poussière ailleurs que dans cette div qui
trouble "ton" navigateur ?)
voir :
<http://www.quirksmode.org/dom/w3c_cssom.html> ?
qui semble pourtant ne pas rapporter de problème ...
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
soit une div, si je mesure sa hauteur sur Safari, Firefox, Chrome, Opera
(snip)
Et pourquoi Opera serait différent de Chrome, qui a le même moteur ?
sans un exemple en ligne comment constater par nous-même ce phénomène ? (peut-être autant c'est une poussière ailleurs que dans cette div qui trouble "ton" navigateur ?)
voir : <http://www.quirksmode.org/dom/w3c_cssom.html> ? qui semble pourtant ne pas rapporter de problème ...
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
Le 19/12/14 18:27, SAM a écrit :
sans un exemple en ligne comment constater par nous-même ce phénomène ? (peut-être autant c'est une poussière ailleurs que dans cette div qui trouble "ton" navigateur ?)
Oui, bonne idée, je ne me souvenais plus comment faire un transfert ftp...
c'est là : <http://studio.quatorze.free.fr/json2dom/>
dans la console, il y a tout un tas de tucs genre : org_ytho_controller.itemElt.offsetHeight = 317 controller.js:155
le but, pour connaitre la height, c'est de savoir combien je peux mettre d'items dans un page.
sur mon portable 1280x800px^2 j'en ai 19; sur mon imac 1680x1050px^2 j'ouvre des fenêtres de butineur + grande, j'aimerais que ça s'ajuste. bon en ce moment j'utilise Opera developer.
car chrome bouffe trop de resources CPU, amha.
en fait ce test est un bout de code, non, finaliser qui génère des nœuds DOm à partir d'objets js.
Le 19/12/14 18:27, SAM a écrit :
sans un exemple en ligne comment constater par nous-même ce phénomène ?
(peut-être autant c'est une poussière ailleurs que dans cette div qui
trouble "ton" navigateur ?)
Oui, bonne idée, je ne me souvenais plus comment faire un transfert ftp...
c'est là :
<http://studio.quatorze.free.fr/json2dom/>
dans la console, il y a tout un tas de tucs genre :
org_ytho_controller.itemElt.offsetHeight = 317
controller.js:155
le but, pour connaitre la height, c'est de savoir combien je peux mettre
d'items dans un page.
sur mon portable 1280x800px^2 j'en ai 19;
sur mon imac 1680x1050px^2 j'ouvre des fenêtres de butineur + grande,
j'aimerais que ça s'ajuste.
bon en ce moment j'utilise Opera developer.
car chrome bouffe trop de resources CPU, amha.
en fait ce test est un bout de code, non, finaliser qui génère des nœuds
DOm à partir d'objets js.
sans un exemple en ligne comment constater par nous-même ce phénomène ? (peut-être autant c'est une poussière ailleurs que dans cette div qui trouble "ton" navigateur ?)
Oui, bonne idée, je ne me souvenais plus comment faire un transfert ftp...
c'est là : <http://studio.quatorze.free.fr/json2dom/>
dans la console, il y a tout un tas de tucs genre : org_ytho_controller.itemElt.offsetHeight = 317 controller.js:155
le but, pour connaitre la height, c'est de savoir combien je peux mettre d'items dans un page.
sur mon portable 1280x800px^2 j'en ai 19; sur mon imac 1680x1050px^2 j'ouvre des fenêtres de butineur + grande, j'aimerais que ça s'ajuste. bon en ce moment j'utilise Opera developer.
car chrome bouffe trop de resources CPU, amha.
en fait ce test est un bout de code, non, finaliser qui génère des nœuds DOm à partir d'objets js.
SAM
Le 19/12/14 19:13, Une Bévue a écrit :
c'est là : <http://studio.quatorze.free.fr/json2dom/>
En 1ère "analyse" : comme aucun de mes navigateurs n'est réglé sur les mêmes tailles de police (et fonte ?) je n'ai pas le même encombrement en hauteur pour les items À vue de nez, les 12 items totalisent environ 30px de plus dans "mon" Fx que dans "mon" Chrome ———> <http://cjoint.com/?0LumVOb6UZE>
Mes version de Chrome et Safari ne sont certainement pas les dernières !
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Le 19/12/14 19:13, Une Bévue a écrit :
c'est là :
<http://studio.quatorze.free.fr/json2dom/>
En 1ère "analyse" :
comme aucun de mes navigateurs n'est réglé sur les mêmes tailles de
police (et fonte ?) je n'ai pas le même encombrement en hauteur pour les
items
À vue de nez, les 12 items totalisent environ 30px de plus dans "mon" Fx
que dans "mon" Chrome
———> <http://cjoint.com/?0LumVOb6UZE>
Mes version de Chrome et Safari ne sont certainement pas les dernières !
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
c'est là : <http://studio.quatorze.free.fr/json2dom/>
En 1ère "analyse" : comme aucun de mes navigateurs n'est réglé sur les mêmes tailles de police (et fonte ?) je n'ai pas le même encombrement en hauteur pour les items À vue de nez, les 12 items totalisent environ 30px de plus dans "mon" Fx que dans "mon" Chrome ———> <http://cjoint.com/?0LumVOb6UZE>
Mes version de Chrome et Safari ne sont certainement pas les dernières !
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
Le 20/12/14 12:40, SAM a écrit :
En 1ère "analyse" : comme aucun de mes navigateurs n'est réglé sur les mêmes tailles de police (et fonte ?) je n'ai pas le même encombrement en hauteur pour les items À vue de nez, les 12 items totalisent environ 30px de plus dans "mon" Fx que dans "mon" Chrome ———> <http://cjoint.com/?0LumVOb6UZE>
Mes version de Chrome et Safari ne sont certainement pas les dernières !
OK, merci beaucoup pour ces captures écrans. J'avais bien noté que Firefox donnait des caractères plus gros que les autres butineurs, ça me gène surtout pour "footer_right_tiny" : <http://www.cjoint.com/14dc/DLuqkbGoep4_footer_right_tiny_opera___firefox.png>
bon, mais ça doit pouvoir s'arranger, sans avoir à sniffer le browser.
le problème que je rencontre, seulement avec Opera Developer, est que l'offsetHeight de l'élément 'item' par exemple me donne, par javascript 30px de moins que ce que je mesure avec ScreenRuler.
Déjà je m'étais rendu compte que la largeur de la fenêtre était fausse, toujours avec ce navigateur-là 5opera dev), car, d'après moi elle ajoute la bordure externe à la fenêtre sur mac os, soit l'ombre de la fenêtre si bien que, par javascript opera dev me retournait des largeurs de fenêtre plus grande que mon écran...
Le 20/12/14 12:40, SAM a écrit :
En 1ère "analyse" :
comme aucun de mes navigateurs n'est réglé sur les mêmes tailles de
police (et fonte ?) je n'ai pas le même encombrement en hauteur pour les
items
À vue de nez, les 12 items totalisent environ 30px de plus dans "mon" Fx
que dans "mon" Chrome
———> <http://cjoint.com/?0LumVOb6UZE>
Mes version de Chrome et Safari ne sont certainement pas les dernières !
OK, merci beaucoup pour ces captures écrans.
J'avais bien noté que Firefox donnait des caractères plus gros que les
autres butineurs, ça me gène surtout pour "footer_right_tiny" :
<http://www.cjoint.com/14dc/DLuqkbGoep4_footer_right_tiny_opera___firefox.png>
bon, mais ça doit pouvoir s'arranger, sans avoir à sniffer le browser.
le problème que je rencontre, seulement avec Opera Developer, est que
l'offsetHeight de l'élément 'item' par exemple me donne, par javascript
30px de moins que ce que je mesure avec ScreenRuler.
Déjà je m'étais rendu compte que la largeur de la fenêtre était fausse,
toujours avec ce navigateur-là 5opera dev), car, d'après moi elle ajoute
la bordure externe à la fenêtre sur mac os, soit l'ombre de la fenêtre
si bien que, par javascript opera dev me retournait des largeurs de
fenêtre plus grande que mon écran...
En 1ère "analyse" : comme aucun de mes navigateurs n'est réglé sur les mêmes tailles de police (et fonte ?) je n'ai pas le même encombrement en hauteur pour les items À vue de nez, les 12 items totalisent environ 30px de plus dans "mon" Fx que dans "mon" Chrome ———> <http://cjoint.com/?0LumVOb6UZE>
Mes version de Chrome et Safari ne sont certainement pas les dernières !
OK, merci beaucoup pour ces captures écrans. J'avais bien noté que Firefox donnait des caractères plus gros que les autres butineurs, ça me gène surtout pour "footer_right_tiny" : <http://www.cjoint.com/14dc/DLuqkbGoep4_footer_right_tiny_opera___firefox.png>
bon, mais ça doit pouvoir s'arranger, sans avoir à sniffer le browser.
le problème que je rencontre, seulement avec Opera Developer, est que l'offsetHeight de l'élément 'item' par exemple me donne, par javascript 30px de moins que ce que je mesure avec ScreenRuler.
Déjà je m'étais rendu compte que la largeur de la fenêtre était fausse, toujours avec ce navigateur-là 5opera dev), car, d'après moi elle ajoute la bordure externe à la fenêtre sur mac os, soit l'ombre de la fenêtre si bien que, par javascript opera dev me retournait des largeurs de fenêtre plus grande que mon écran...
SAM
Le 20/12/14 16:08, Une Bévue a écrit :
Le 20/12/14 12:40, SAM a écrit :
En 1ère "analyse" : comme aucun de mes navigateurs n'est réglé sur les mêmes tailles de police (et fonte ?) je n'ai pas le même encombrement en hauteur pour les items À vue de nez, les 12 items totalisent environ 30px de plus dans "mon" Fx que dans "mon" Chrome ———> <http://cjoint.com/?0LumVOb6UZE>
Mes version de Chrome et Safari ne sont certainement pas les dernières !
OK, merci beaucoup pour ces captures écrans. J'avais bien noté que Firefox donnait des caractères plus gros que les autres butineurs, ça me gène surtout pour "footer_right_tiny" : <http://www.cjoint.com/14dc/DLuqkbGoep4_footer_right_tiny_opera___firefox.png>
je te propose :
footer div#footer_right_tiny { position: absolute; left: 50%; bottom: 0px; width: auto; /* correctif, utiliser tte largeur restante à droite */ height: 20px; margin: 5px; padding: 5px; display: inline; /* nouveau mode */ white-space: nowrap; /* pas de retour à la ligne */ }
Ça doit théoriquement forcer la largeur de la colonne de droite à contenir tous ses boutons du bas (ascenseur si affichage trop étroit) (corriger alors largeur et dispositions des autres boutons)
si bien que, par javascript opera dev me retournait des largeurs de fenêtre plus grande que mon écran...
Je ne puis grand' chose pour toi à ce niveau (qui utilise Opera."dev" ?)
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Le 20/12/14 16:08, Une Bévue a écrit :
Le 20/12/14 12:40, SAM a écrit :
En 1ère "analyse" :
comme aucun de mes navigateurs n'est réglé sur les mêmes tailles de
police (et fonte ?) je n'ai pas le même encombrement en hauteur pour les
items
À vue de nez, les 12 items totalisent environ 30px de plus dans "mon" Fx
que dans "mon" Chrome
———> <http://cjoint.com/?0LumVOb6UZE>
Mes version de Chrome et Safari ne sont certainement pas les dernières !
OK, merci beaucoup pour ces captures écrans.
J'avais bien noté que Firefox donnait des caractères plus gros que les
autres butineurs, ça me gène surtout pour "footer_right_tiny" :
<http://www.cjoint.com/14dc/DLuqkbGoep4_footer_right_tiny_opera___firefox.png>
je te propose :
footer div#footer_right_tiny {
position: absolute;
left: 50%;
bottom: 0px;
width: auto; /* correctif, utiliser tte largeur restante à droite */
height: 20px;
margin: 5px;
padding: 5px;
display: inline; /* nouveau mode */
white-space: nowrap; /* pas de retour à la ligne */
}
Ça doit théoriquement forcer la largeur de la colonne de droite à
contenir tous ses boutons du bas
(ascenseur si affichage trop étroit)
(corriger alors largeur et dispositions des autres boutons)
si bien que, par javascript opera dev me retournait des largeurs de
fenêtre plus grande que mon écran...
Je ne puis grand' chose pour toi à ce niveau
(qui utilise Opera."dev" ?)
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
En 1ère "analyse" : comme aucun de mes navigateurs n'est réglé sur les mêmes tailles de police (et fonte ?) je n'ai pas le même encombrement en hauteur pour les items À vue de nez, les 12 items totalisent environ 30px de plus dans "mon" Fx que dans "mon" Chrome ———> <http://cjoint.com/?0LumVOb6UZE>
Mes version de Chrome et Safari ne sont certainement pas les dernières !
OK, merci beaucoup pour ces captures écrans. J'avais bien noté que Firefox donnait des caractères plus gros que les autres butineurs, ça me gène surtout pour "footer_right_tiny" : <http://www.cjoint.com/14dc/DLuqkbGoep4_footer_right_tiny_opera___firefox.png>
je te propose :
footer div#footer_right_tiny { position: absolute; left: 50%; bottom: 0px; width: auto; /* correctif, utiliser tte largeur restante à droite */ height: 20px; margin: 5px; padding: 5px; display: inline; /* nouveau mode */ white-space: nowrap; /* pas de retour à la ligne */ }
Ça doit théoriquement forcer la largeur de la colonne de droite à contenir tous ses boutons du bas (ascenseur si affichage trop étroit) (corriger alors largeur et dispositions des autres boutons)
si bien que, par javascript opera dev me retournait des largeurs de fenêtre plus grande que mon écran...
Je ne puis grand' chose pour toi à ce niveau (qui utilise Opera."dev" ?)
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
Le 26/12/14 12:10, SAM a écrit :
je te propose :
footer div#footer_right_tiny { position: absolute; left: 50%; bottom: 0px; width: auto; /* correctif, utiliser tte largeur restante à droite */ height: 20px; margin: 5px; padding: 5px; display: inline; /* nouveau mode */ white-space: nowrap; /* pas de retour à la ligne */ }
Ça doit théoriquement forcer la largeur de la colonne de droite à contenir tous ses boutons du bas (ascenseur si affichage trop étroit) (corriger alors largeur et dispositions des autres boutons)
OK, merci, beaucoup, c'est adopté !
si bien que, par javascript opera dev me retournait des largeurs de fenêtre plus grande que mon écran...
Je ne puis grand' chose pour toi à ce niveau (qui utilise Opera."dev" ?)
Oui, je m'en va regarder avec Opera tout court.
En fait je ne peux utiliser qu'un navigateur reconnaissant les "dialog"s...
Safari est exclu.
Le 26/12/14 12:10, SAM a écrit :
je te propose :
footer div#footer_right_tiny {
position: absolute;
left: 50%;
bottom: 0px;
width: auto; /* correctif, utiliser tte largeur restante à droite */
height: 20px;
margin: 5px;
padding: 5px;
display: inline; /* nouveau mode */
white-space: nowrap; /* pas de retour à la ligne */
}
Ça doit théoriquement forcer la largeur de la colonne de droite à
contenir tous ses boutons du bas
(ascenseur si affichage trop étroit)
(corriger alors largeur et dispositions des autres boutons)
OK, merci, beaucoup, c'est adopté !
si bien que, par javascript opera dev me retournait des largeurs de
fenêtre plus grande que mon écran...
Je ne puis grand' chose pour toi à ce niveau
(qui utilise Opera."dev" ?)
Oui, je m'en va regarder avec Opera tout court.
En fait je ne peux utiliser qu'un navigateur reconnaissant les "dialog"s...
footer div#footer_right_tiny { position: absolute; left: 50%; bottom: 0px; width: auto; /* correctif, utiliser tte largeur restante à droite */ height: 20px; margin: 5px; padding: 5px; display: inline; /* nouveau mode */ white-space: nowrap; /* pas de retour à la ligne */ }
Ça doit théoriquement forcer la largeur de la colonne de droite à contenir tous ses boutons du bas (ascenseur si affichage trop étroit) (corriger alors largeur et dispositions des autres boutons)
OK, merci, beaucoup, c'est adopté !
si bien que, par javascript opera dev me retournait des largeurs de fenêtre plus grande que mon écran...
Je ne puis grand' chose pour toi à ce niveau (qui utilise Opera."dev" ?)
Oui, je m'en va regarder avec Opera tout court.
En fait je ne peux utiliser qu'un navigateur reconnaissant les "dialog"s...
