Masquer la barre de défilement horizontale

J'ai un problème avec la barre de défilement horizontale.
Je ne veux pas qu'il s'affiche. En fait il ne s'affiche que dans google Chrome, et il n'est pas dans Internet Explorer.
Que puis-je faire? J'ai essayé de modifier la largeur et le rembourrage dans la classe css, mais cela change la mise en page. Le contenu à l'intérieur de test est dynamique, donc il risque de déborder à la verticale, et c'est très bien parce que je ne veux pas de barre de défilement horizontale.

HTML:

<div class="test">
    <table>
        <tr>
            <td>test</td>
        </tr>
    </table>
</div>

CSS:

.test {
    BORDER-TOP: #7F9DB9 1px solid;
    BORDER-RIGHT: #7F9DB9 1px solid;
    BORDER-LEFT: #7F9DB9 1px solid;
    BORDER-BOTTOM: #7F9DB9 1px solid;
    WIDTH: 100%;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 10px;
    PADDING-BOTTOM: 10px;
    PADDING-TOP: 10px;
    HEIGHT: 100%;
    BACKGROUND-COLOR: #ffffff
}

ici est un violon si vous en avez besoin: http://jsfiddle.net/XLY9L/

Grâce

S'il vous plaît changer la question du titre, comme il ne l'exprime pas votre problème.

OriginalL'auteur Gyonder | 2013-04-03

7

Il y a une solution simple pour cela, il suffit d'ajouter ceci dans votre CSS déclaration:
```
box-sizing: border-box;
```
La raison pour barre de défilement horizontale apparaît, c'est que remplissage et de bordure par défaut est ajouté à ce que la largeur que vous donnez à votre élément. En définissant explicitement à border-box, le remplissage et la bordure sont inclus dans la valeur de la largeur.

Cette propriété est prise en charge dans IE8+, FireFox 19+ (en utilisant -moz-box-sizing) et iOS Safari et Android (à l'aide de -webkit-box-sizing)

Aussi, je suggère fortement à l'aide d'abréviation css, comme suit:
```
.test {
    BOX-SIZING: border-box;
    WIDTH: 100%;
    HEIGHT: 100%;
    PADDING: 10px 0 10px 10px;
    BORDER: #7F9DB9 1px solid;
    BACKGROUND-COLOR: #ffffff;
}
```
merci. J'ai seulement ajouter pour ajouter les -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; pour le rendre compatible avec mon navigateur.
Rock on! C'est tout vous avez besoin pour obtenir le plein soutien

OriginalL'auteur micadelli
8

Vous pouvez essayer avec de simples manière
```
BODY {
    overflow-x:hidden;
}
```
Ce n'est pas résoudre quoi que ce soit, il vient se cache le problème.

OriginalL'auteur Michał Wrotkowski
3

Sinon pour @micadelli réponse, vous pouvez supprimer le width: 100% parce que <div class="test"> est un au niveau du bloc élément et de remplir automatiquement l'espace horizontal qu'il occupante dans le conteneur actuel.

box-sizing a sa place, mais c'est la bonne solution. L'ajout de 100% de la largeur d'un bloc de niveau élément qui introduit un tas de questions, il est important de comprendre pourquoi il n'est pas nécessaire. Aussi, si IE7 soutien est nécessaire (urgh), puis box-sizing est un non-starter.
Je suis d'accord que c'est la réponse si il n'y a pas de raison spéciale pour fixer sa largeur à 100% manuellement.
basé sur la réduction des cas prévus puis, c'est la solution la plus simple. Je suis curieux de savoir lorsque vous choisissez de régler la width à 100% manuellement?
Je dois avouer que je n'ai pas trouver un cas simple quand utiliser que 100% 🙂 Mais ce que je voulais dire si la largeur n'est pas explicitement nécessaires pour définir à ce que %s '
Absolument - modifiant le modèle de boîte de tout (* FTW) serait presque certainement faire de l'OP la vie plus facile à l'avenir. Pour des sites responsive j'ai trouvé c'est la seule option. Mais même dans ce cas, vous pas définir explicitement la largeur à 100% - c'est ne rien faire.

OriginalL'auteur Amy
3

Ajouter ce code dans votre CSS. Il permet de désactiver votre barre de défilement horizontale.
```
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
```
Oui, car il permettra également de désactiver le défilement. Nous voulons être en mesure de faire défiler horizontalement. Cela désactive.

OriginalL'auteur vasanth
0

vous pouvez également essayer ce simple code css de votre site. il suffit d'écrire overflow-x:hidden; sur la balise body. il va se cacher à partir de votre corps.

OriginalL'auteur Ihsan Khattak

Annuler la réponse

Vous devez vous connecter pour publier un commentaire.