9
votes

Pourquoi est-ce que je reçois une barre de défilement horizontale pour la largeur: 100% en chrome?

À partir de:

width: 1600px;
   html, body - 100%

css

6 commentaires

No-Repro dans ce violon dans le chrome 10: JSFIDDLE.net/kjzbq Le violon fonctionne-t-il pour vous, ou pause aussi?


@Pekka: Vous avez "CSS normalisé" coché.


@Chirty ah, je vois! Est-ce une nouvelle fonctionnalité ou je suis surplombé tout le temps? Il y avait un autre cas aujourd'hui où il a déformé les résultats.


@Pekka, je suis gêné d'admettre que je ne sais pas comment obtenir Jsfiddle pour me montrer la page.


@bmargulies ne le désactive ni i :) mais c'est un iframe afin que le comportement soit le même (il devrait y avoir une barre de défilement dans le volet "Résultat")


@Pekka: Vous devez vous surplombir. Il y a été là pour au moins aussi longtemps que je l'ai été (qui est quand j'ai commencé à utiliser Jsfiddle). jsfiddle.net/kjzbq/1 sans cette boîte pesky cochée.


5 Réponses :


10
votes

Vous devez ajouter marge: 0 Pour supprimer la marge par défaut dans le corps élément

Êtes-vous sûr d'avoir besoin de largeur: 100% ?

html et corps sont par défaut "Largeur totale" en raison d'être Block bloquer -level éléments.


13 commentaires

Nan. Le contenu est toujours largeur: 1600px en fonction des outils de développeur chrome, beaucoup plus large que l'immobilier de l'écran disponible. Tout ce qui s'est passé est que la marge gauche a disparu.


@bmargulies qui sonne bizarre, cela fonctionne parfaitement pour moi si j'appliquais les conseils de Thirtydot. Vous avez deux écrans? Quelle est la largeur de votre écran? Êtes-vous sûr à 100% que vous n'avez pas d'élément à l'intérieur de la page le forçant à s'étirer?


@bmargulies: fiddle.jshell.net/kjzbq/2/show/light + Outils de développeur me montre que les deux HTML et Les éléments sont aussi larges que ma fenêtre: i.imgur.com/8ze0f.png - Je pense qu'il y a quelque chose d'autre se passe ici: o


@Chirty je suis d'accord, mais la même chose idiote se produit dans FF et en chrome. J'ai posté tout le spectacle à Github, si vous vous sentez vraiment gentil avec des animaux muettes, vous pourriez jeter un coup d'œil.


@bmargulies: essais avec une version locale de Votre page , et ajouter le CSS de votre question, je ne peux pas reproduire avec aucun de mes navigateurs. J'ai une barre de défilement horizontale pour la raison de ma réponse. Ajouter marge: 0 ou suppression de largeur: 100% corrige cela. Le fait que cela semble lié au brancement de différents moniteurs et que le redémarrage de votre ordinateur me conduit à croire que ce n'est pas une chose HTML / CSS du tout. C'est une sorte de problème de système d'exploitation (???).


N'est-ce que votre page qui a la largeur obscure? Est-ce que cela le fait toujours si vous désactivez JavaScript?


Eh bien, StackoVerflow n'a pas le problème :-) Et je ne sais pas de savoir que Spike JavaScript dans Chrome. Je suppose que je vais redémarrer et voir ce que je vois.


Hmm. J'ai redémarré. Et je vois toujours le problème avec la version de la page que j'ai mise sur GitHub, qui est autonome, CSS-sage.


La désactivation de JS n'a aucun effet, j'ai trouvé cela.


Supprimer la largeur et le laisser être largeur: auto; n'a rien changé.


@bmargulies: pas un si dilemme fou après tout, était-ce? : D Oh bien, je suis content que vous l'avez compris.


Eh bien, le mauvais CSS était dans le contenu que j'ai mis sur GitHub. La partie puante de ceci est que Chrome n'attribue pas le 1600px à la largeur min.


Ah, bien cela l'expliquerait. Je n'ai bien copié que votre fichier HTML. Je n'ai pas touché le dossier quelque chosewong_files . Que je suis bête!



3
votes

Essayez d'utiliser une réinitialisation CSS ...

http://meyerweb.com/eric/tools/csss/reset/ index.html

... pour définir toutes les propriétés CSS sur leurs valeurs par défaut.

J'espère que cela vous aidera.
HRISTO


0 commentaires

2
votes

Pour le dossier, je pense qu'il est préférable d'avoir l'explication dans une réponse.

Il y avait une autre clause CSS sur le fichier: P>

body
{ 
    minWidth: 100em;
}


0 commentaires

2
votes

J'ai eu le même problème. pourrait être une autre div dans le corps est d'avoir un rembourrage ou une marge.


0 commentaires

0
votes

La marge ou le rembourrage peut le causer.

Dans mon cas, le rembourrage


0 commentaires