Lorsque vous allez à la page sur mon site Web où il existe un contenu supplémentaire, la barre de défilement apparaît à droite, mais elle a un décalage notable à gauche pour mon contenu. Vous remarquez cela en cliquant sur Accueil, puis à l'hébergement et à nouveau sur mon site (www.ipalaces.org)
Comment puis-je rendre compte de la barre de défilement du navigateur sur mes pages? Puis-je le faire pour que la barre de défilement soit toujours visible au moins?
Mon site Web est www.ipalaces.org , s'il vous plaît laissez-moi savoir.
6 Réponses :
Eh bien, cela dépend du navigateur.
body {
overflow-y: scroll;
overflow-x: scroll;
overflow: -moz-scrollbars-vertical;
}
Cela laisse une barre de défilement laid de défilement laid quand elle en a besoin.
Définir la «barre de défilement double». Deux barres de défilement ensemble sur chaque axe?
Vous ne devez pas appliquer les propriétés de trop-plein sur les deux html et corps sinon vous aurez deux barres de défilement! Yuck!
@Wsanville: Ah, c'est ce que le commentaire @ Bhare signifiait. Je suis d'accord, c'est laid.
Faites votre corps 101% de hauteur ... cela obligera la barre de défilement à toujours apparaître.
body {height:101%}
Cela fonctionne bien, mais il y a ensuite un décalage descendant de 1 pixel ennuyeux. N'y a-t-il pas un moyen de rendre tous les navigateurs à afficher la barre de défilement mais l'avoir désactivé si nécessaire. Comme -Moz-ScrollBars-Vertical; mais plus universel
HTML, Corps {Hauteur: 100%; Marge-Bottom: 1px;} semble avoir diminué l'écart, mais il reste encore un écart ennuyeux.
Donnez ceci un essai ... Je sais que c'est laid mais ce n'est peut-être le seul moyen. , puis dans votre HTML quelque part (de préférence avant votre < > ):
-0,1px n'est pas une mesure valide. Malgré tout, en utilisant -1px ou -0.1em, laisse toujours le même effet que la marge-bas: 1px; La page peut toujours faire défiler 1 pixel.
@Brian, voir la modification. À l'origine, le n'a pas été échappé / marqué comme code. Donc, il n'a pas été rendu à la page. Je me rends compte qu'il est probablement trop tard pour être utile.
body {
overflow: scroll;
}
I had the same problem with even the newest Firefox (3.5).
The overflow function saved my life!
J'ai testé cela sur IE6, IE7, IE8, Firefox 3 et Chrome, et le moyen simple d'avoir une barre de défilement verticale toujours visible est simplement:
html { overflow-y: scroll; }
Cela semble moins hacable que la réponse attribuée. CSS-Tricks.com/...
Cela semble fonctionner très bien pour moi ...
html {
overflow-y: scroll;
}
Pour ceux qui tentent de reproduire, vous devrez peut-être rendre votre fenêtre de plus petite taille.
Fonctionne bien pour moi dans IE8. Quel navigateur parle-t-on ici?
Tous les navigateurs, j'utilise 1360 x 768 RES, 720p sur mon téléviseur HDTV, alors votre résolution est peut-être plus élevée qui vous permet de voir le contenu complet, si c'est le cas, essayez d'aller ici ipalaces.org/hosting/domains.html puis cliquez sur Accueil pour remarquer la différence.
Consultez ma réponse ci-dessous, testée dans IE6, 7, 8, FF et Chrome.
J'ai trouvé un problème similaire avec des DIV cachées à l'aide de JQuery, le rebond de l'arrière-plan de rebond est même beaucoup plus gênant avec l'animation. Je travaille sur une méthode JavaScript pour définir le contenu centré à l'aide de la fenêtre avec JavaScript.