web-dev-qa-db-fra.com

Comment empêcher le défilement horizontal sur une page Web responsive?

J'utilise Twitter bootstrap pour rendre mon application réactive. Lorsque je réduis la largeur de la fenêtre de mon navigateur à la taille minimale ou que je vis la page sur un appareil mobile (iPhone, par exemple), l'utilisateur peut faire défiler horizontalement. La quantité de défilement horizontal est faible, mais je voudrais le supprimer tous ensemble.

Je pense que cela est dû au conteneur img que j'inclus, mais je ne suis pas ici. Le html de la page se trouve ici: http://Pastebin.ca/2347946 .

Avez-vous des conseils pour empêcher le défilement horizontal de la page tout en maintenant le défilement dans le conteneur img?

htmlcsstwitter-bootstrapresponsive-design
13
sharataka

je suis presque certain qu'un élément de votre enfant dépasse la largeur de son élément parent. Vérifiez votre code deux fois si la taille de la boîte d'éléments internes est trop grande pour l'une des raisons suivantes: lorsque la largeur de la boîte, y compris margin, padding, border dépasse la limite. Et nous n'avons probablement pas ajouté overflow: hidden; à son élément parent externe. Dans ce cas, ils sont considérés comme allant au-delà de leur élément parent et les navigateurs l’affiche avec la barre de défilement. Corrigez-le en supprimant des marges, des marges, des bordures ou si vous ne voulez pas avoir mal à la tête, essayez simplement d’ajouter overflow:hidden; à la zone extérieure.

14
Akshaya Raghuvanshi

J'ai eu le même problème, et appliqué ceci pour le réparer:

body {
    overflow-x: hidden !important;
}
.container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

Pour développer un peu, je n'avais que le problème sur les téléphones mobiles, c'est donc mon code final:

@media screen and (max-width: 667px) {
    body {
        overflow-x: hidden !important;
    }
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

J'ai trouvé les problèmes à ce sujet sur Github, donc je suppose que les nouvelles versions de Bootstrap ont été corrigées.

14
Nino Škopac

Essayez d’ajouter (dans le @-rule pertinent) un max-width:

img {
    max-width: NNNpx;
}

Cela évitera que img soit trop large.

0
FelipeAls

Le "débordement: caché;" le style est le remède et non la prévention. Si vous voulez éviter cela, vous devez vérifier les éléments de votre corps qui sont plus grands que le corps . Cela se produit lorsque vous prenez une div avec une classe "padding" ou "margin" en dehors de ".container" (Twitter bootstrap) . Donc, supprimez tout le remplissage et la marge en dehors de la classe conteneur.

0
Motahar Hossain