CSS - Comment empêcher le navigateur d'afficher des barres de défilement lorsqu'une div sort de la fenêtre?

I ont une enveloppe centrée par CSS suivante:CSS - Comment empêcher le navigateur d'afficher des barres de défilement lorsqu'une div sort de la fenêtre?

div.wrapper { 
width: 1170px; 
padding-left:30px; 
margin-top: 80px; 
margin-bottom:20px; 
margin-left: auto; 
margin-right: auto; 
position:relative; 
background-color:black; }

intérieur i ai un div avec CSS suivante:

position:absolute; 
top:-26px; 
left:517px; 
height:63px; 
z-index:3;

à l'intérieur de cette div est une image qui a 759px largeur, ce qui rend l'emballage grandir et rend le navigateur afficher une barre de défilement en V sur les résolutions d'affichage inférieures. ce que je veux, c'est que l'image sorte de l'enveloppe mais empêche le navigateur d'afficher la barre de défilement, de sorte que le côté droit de l'image ne s'affiche que si la fenêtre de votre navigateur est assez grande. Je ne peux pas en faire une image d'arrière-plan, car il va sur certains autres contenus. quelque chose qui est compatible avec> = IE7 serait bien.

i téléchargé une image de la page pour montrer ce que je veux dire: http://img153.imageshack.us/img153/6070/hpx.jpg

la boîte bleue est l'emballage, il a 1200px largeur et est toujours centré dans la fenêtre (à moins alors la fenêtre est plus petite que 1200px, puis il défile) la boîte rouge est l'image (la barre verte n'en fait pas partie)

Source

2010-04-14 x4rf41

la convivialité d'un site avec seulement le texte et le design? plz expliquer et tandis que vous y plz expliquer pourquoi vous commentez sur ce point? Vous n'avez évidemment pas de réponse ou de suggestion, voulez-vous juste avoir de l'attention? – x4rf41

@xarfai il commente pour vous informer qu'il a l'impression que votre interface n'est pas idéale. Il n'a pas essayé de répondre à votre question, mais il a laissé un commentaire pour essayer de vous * aider * malgré tout. S'il vous plaît essayez de ne pas être combatif, ce n'est pas le site pour cela. –

@xarfai, avez-vous un lien vers une page de démonstration que nous pouvons examiner avec Firebug, Chrome etc, pour voir s'il existe une solution de rechange que nous pouvons trouver pour vous qui résout vos problèmes. –

, Vous recherchez #your_div { overflow: hidden; }, si vous souhaitez que votre contenu soit caché. Ou #your_div { overflow: visible; } si vous souhaitez que votre contenu soit visible en dehors de la div.

Source

2010-04-14 12:00:06 Arko

le problème est, ce n'est pas vraiment en dehors de la div, le wrapper se développe avec le div interne si je place le débordement à visible, ce qui rend le navigateur afficher barres de défilement – x4rf41

Aw ... ok donc vous parler des barres de défilement de la fenêtre du broswer. Je commencerai alors avec la largeur de div divisée à 100% de la taille de la fenêtre, et en s'assurant qu'aucun contenu ne sera plus grand que cela.Mais vous avez un peu de travail pour refactoriser votre css en fonction de cela ... – Arko

Vous pouvez définir overflow: hidden sur l'encapsuleur afin que le contenu qui dépasse les dimensions de l'encapsuleur ne s'affiche pas.

voir overflow

Source

2010-04-14 12:00:22 rahul

Je veux que le débordement soit visible, je veux que l'image apparaisse en dehors du wrapper, mais je ne veux pas que le navigateur affiche des barres de défilement à cause de ça – x4rf41

La seule méthode qui vient à l'esprit compte tenu de vos exigences est de déplacer l'élément interne de cette div wrapper et le positionner par rapport à la totalité de la fenêtre:

<body> 
    <div class="abs">the div with the image</div> 
    <div class="wrapper">the wrapper div</div> 
</body>

Malheureusement, cela signifie probablement que vous ne pouvez pas le positionner très bien. Vous devrez peut-être utiliser Javascript pour obtenir la largeur/hauteur de la page et/ou la position de la div de wrapper, et calculer le décalage en conséquence. (Vous trouverez des questions sur Stack Overflow pour ces bits.)

Source

2010-04-14 12:18:08 DisgruntledGoat

Le problème réside dans le fait que img est en ligne. Non testé mais vous devez "afficher: bloquer" l'image puis la faire flotter ou la positionner absolument.

Source

2010-04-14 12:54:01 Rob

CSS - Comment empêcher le navigateur d'afficher des barres de défilement lorsqu'une div sort de la fenêtre?

Répondre

Questions connexes