Comment compenser pour le Scrollbar Vertical quand il n'est pas encore présent
peut-être que c'est une solution facile, mais ça me rend dingue depuis longtemps alors j'ai finalement décidé de voir si une solution existe.
simplement mis, Je centre la plupart de mes pages Web dans les ports de vue larges.
exemple, une vue-port peut être capable de 1028px et je veux que la largeur de ma page ne soit que 960px.
donc mon css ressemble à ceci:
#pageWrapper { /* page width is 960 pixels */
margin:0 auto;
width:960px;
}
Pas de problème avec ça.
Le problème vient quand je démarre une page dynamique qui est plus courte que la hauteur de la et puis ma page se dilate (via jQuery slideOut, etc.) sous le bas de l'écran et provoque l'apparition du scrollbar vertical.
il finit par faire clignoter la page à gauche pendant le slide-out, puis à droite pendant le slideIn.
y a-t-il un moyen par css de forcer une marge de 20px à droite et de profiter quand même de margin:0 auto; ?
Merci.
2 réponses
lorsque le contenu de la page n'est plus à la verticale, le navigateur ajoute une barre de défilement au côté droit de la fenêtre. Cela change la largeur disponible dans la fenêtre du navigateur, de sorte que tout contenu qui est centré ou positionné par rapport au côté droit de la fenêtre se déplace un peu à gauche. C'est très commun.
il y a plusieurs façons de contrôler cela, mais le plus commun est de faire en sorte que vous ayez toujours un scrollbar ou jamais avoir un scrollbar par contrôle de la propriété overflow-y sur la fenêtre.
le réglage overflow-y: scroll forcera les barres de défilement à être toujours là.
le réglage overflow-y: hidden forcera à ne jamais avoir de barres de défilement.
NB: overflow-y: hidden empêche l'utilisateur de défiler vers le bas par n'importe quel moyen, rendant effectivement tout contenu en dessous du point de vue inférieur inaccessible.