En position absolue div sur la droite, causant la barre de défilement lorsque la gauche n'a pas
Je suis en train de "flanc" centré div avec quelques éléments de conception qui sont absolument positionné en dehors de la div principale de largeur. J'ai une barre de défilement en raison de l'élément sur le droit, mais pas l'élément sur la gauche (IE6/7/8, Chrome, Firefox). Comment puis-je obtenir débarrasser de la barre de défilement horizontale?
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body { text-align: center; }
.wrapper {
margin: 0 auto;
position: relative;
width: 960px;
z-index: 0;
}
.main {
background: #900;
height: 700px;
}
.right, .left {
position: absolute;
height: 100px;
width: 100px;
}
.right {
background: #090;
top: 0px;
left: 960px;
z-index: 1;
}
.left {
background: #009;
top: 0px;
left: -100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
Je ne vois pas les barres de défilement sur Chrome et Firefox sur Mac. Quel doctype utilisez-vous?
Je suis l'aide de celui-ci (ci-dessous), et je suis un PC... n'a pas le vérifier dans n'importe quel Mac versions de navigateurs. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Je suis l'aide de celui-ci (ci-dessous), et je suis un PC... n'a pas le vérifier dans n'importe quel Mac versions de navigateurs. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
OriginalL'auteur Michael Snyder | 2010-02-17
Vous devez vous connecter pour publier un commentaire.
Cela fonctionne dans IE6-9, FF3.6, Safari 5 et Chrome 5. Ne semble pas à la matière ce que doctype je l'ai jeté à elle(aucun, xhtml 1 transitoires, html5). Espérons que cette aide, qui a été un problème intéressant.
OriginalL'auteur joelpittet
Jeter un overflow-x: hidden sur le corps de la balise serait de travailler dans tout ce qui n'est pas IE6/7... mais pour ces deux navigateurs, vous devrez également ajouter overflow-x: hidden à la balise html.
Donc utiliser ce que vous avez maintenant avec ce réglage:
Noter que la raison pour laquelle les "*" hack " est utilisé dans le code html, le corps de la déclaration est parce que IE8 est non conventionnelles. Si vous ne l'utilisez pas, IE8 va perdre les barres de défilement verticale et non horizontale. Je ne sais pas pourquoi. Mais cette solution doit être fine.
Je sais, c'était juste pour la sténographie. J'ai toujours utiliser un IE.fichier css chargé par le biais de l'IE commentaire conditionnel.
OriginalL'auteur RussellUresti
J'ai eu un problème similaire sur ce et a été complètement déchirer mes cheveux que j'ai trouvé la solution ci-dessus n'a pas assez de travail pour moi. - Je surmonter cela par la création d'un div en dehors de mes principaux div conteneur et à l'aide de min-width et max-width à venir avec une solution.
J'ai trouvé, cependant, que j'ai aussi besoin de faire de la place.png image de la taille de la div, donc je l'ai fait comme un png transparent à 1100px. C'était ma solution à ce problème et j'espère que ça peut aider quelqu'un d'autre.
Sur une note de côté, j'ai aussi eu une image sur le côté gauche, j'ai du utiliser le positionnement absolu qui n'ont pas la même barre de défilement question que le côté droit. Apparemment, la droite et la gauche ne prennent différentes propriétés de ce recherche que j'ai faite à ce sujet.
En ce qui concerne les personnes utilisant overflow-x:hidden, j'aurais pas d'accord avec cette méthode, principalement parce que vous prenez loin la capacité des utilisateurs à défilement horizontal complètement. Si votre site web est conçu pour être visionné l'une résolution de 1024px, puis les gens qui sont sur un 800px resolution de ne pas être en mesure de voir la moitié de votre site web si vous enlevez la possibilité de défiler horizontalement.
OriginalL'auteur Sarah
Votre corps n'est pas défini par rapport à.
OriginalL'auteur Louis Stephens
Ne sachant pas ce que tu aimerais faire avec cela, il me faudrait peut-être définir une image de fond sur le corps à la place.
Si vous n'êtes pas afficher quoi que ce soit qui va être en interaction avec, il n'y a certainement rien de mal d'aller dans cette voie.
L'image d'arrière-plan (centré) est la meilleure option, en supposant que vous n'ont pas de contenu à gauche et à droite (puisque ne sachant pas si ils seront cachés). Le fond de l'image contiendra la gauche et la droite couleurs/images seulement et soit plus que l'objectif de surveiller les largeurs.
OriginalL'auteur mistalaba
Vous obtenez une barre de défilement uniquement lorsque la fenêtre est plus mince que la principale plus la zone de droite, droite? (Ne pensez pas que ce qui est évident pour certaines personnes.) Ce qui est attendu du comportement du navigateur de contenu de débordement.
En fonction de ce que vous voulez arriver (pourquoi voulez-vous qu'il disparaisse dans cette circonstance, si vous le faites?), vous pourriez mettre overflow:hidden sur .wrapper. Qui serait toujours le cacher, si vous êtes à la recherche pour afficher dynamiquement sur certains autres cas, cela fonctionnera.
Si je ne me trompe pas, cependant, vous n'avez tout simplement pas envie de le montrer lors de leur fenêtre d'affichage est seulement 960px de large. AFAIR vous ne pouvez pas le faire sans js/jQuery. Ma suggestion serait-surtout si vous ne voulez pas salir avec javascript-si vous voulez que ce contenu soit visible à tous, accepter la barre de défilement au étroites. Il peut irriter vous vous en tant que designer, mais la plupart des gens ne le remarqueront pas, et ceux qui ne peuvent toujours accéder à votre contenu, ce qui est une victoire, non?
Je ne sais pas ce que la spécification a à dire à ce sujet, mais de l'expérience, en haut et à gauche, des débordements sont traités différemment. C'est pourquoi nous ne pouvons cacher les éléments indésirables de la gauche:-99999em et top:-999em et ces. Si vous voulez résoudre ce problème, je vous conseille d'utiliser un peu de javascript.
(Ou à l'aide d'une image d'arrière-plan.)
Si jQuery est une option pour vous, faites le moi savoir et je peux vous donner une solution.
Aussi, vous set overflow:hidden sur le corps de l'élément, mais c'est une très mauvaise idée. En effet, les gens de naviguer avec des petites fenêtres, et il serait de couper votre contenu principal à ces largeurs.
OriginalL'auteur D_N
De l'emballage de tous les éléments dans un div, font que les div en position relative et trop-plein caché. Il résout ce problème à chaque fois. 😀
OriginalL'auteur Nic Bell
Si la langue de la page est de gauche à droite, puis la gauche non-côté d'éléments qui ne causent pas de barre de défilement.
Essayez ceci:
Cela va changer l'orientation du texte de la page à Droite À Gauche, et maintenant la gauche de la div sera la cause d'une barre de défilement, pas le droit.
Vous pouvez faire de même avec la direction:rtl propriété css.
Si vous voulez que votre page de rendre indépendante de l'orientation du texte et vous pouvez organiser les éléments de la page différemment pour éviter cela.
OriginalL'auteur Gorkem Pacaci
Vieille question je sais, mais il peut aider quelqu'un d'autre. Le ci-dessous s'étend sur James réponse, mais fonctionne dans IE6/7/8/9, FF et Webkit. Oui il utilise mal les expressions, mais vous pouvez mettre que dans un IE6 feuille de style spécifique.
OriginalL'auteur Kirk Bentley
J'ai besoin d'une solution comme cela trop - merci à tous ceux qui ont suggéré l'100% à l'échelle de wrapper avec overlow-x caché. Cependant, je ne pense pas que vous ayez à ajouter un petit #bodyInner div - j'ai testé avec succès il l'application de la largeur et de dépassement des attributs directement à corps dans Safari, Opera, Firefox, Chrome et IE8.
OriginalL'auteur Mark
J'ai une solution qui ne fonctionne pas dans IE7/IE6, mais semble être bon partout ailleurs.
Créer un wrapper (
#bodyInner
) autour de tout à l'intérieur de votre <body
> tag.Appliquer cette règle CSS:
Trop mauvais, vous ne pouvez pas il suffit d'appliquer ce sur le <
body
> élément.OriginalL'auteur James