CSS, position: absolute, les barres de défilement

Dire qu'il y a une page:

<html><body>
<div style="position: relative;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

Pourquoi la barre de défilement horizontale représente seulement le DROIT de débordement?

En d'autres termes, pourquoi la GAUCHE ne provoque pas de barre de défilement, alors que celle de DROITE n'?

Est-il un moyen, autre que body -> overflow: hidden, pour le DROIT de ne pas déclencher la barre de défilement?

Modifier:

Ce que je cherche est un wrapper dans le milieu de la page (comme tous les autres "contenu" volet là - essentiellement div -> margins: 0 auto;. Ce qui devrait déclencher la barre de défilement horizontal si l'écran est trop petit. Ensuite, et c'est le problème, je veux une autre div pour "coller à l'extérieur" de l'emballage - ci ne doit pas déclencher la barre de défilement.

Edit 2:

<html><body>
<div id="wrapper" style="position: relative; margin: auto; 
  width: 400px; height: 200px; background-color: red;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

Lorsque l'écran est assez large, tout va bien. Mais comme je l'ai essayer de rétrécir l'écran, tout à coup, une barre de défilement horizontale apparaît. Le problème est, il ne permet que de faire défiler pour voir à DROITE et pas à GAUCHE. Est la un moyen de la barre de défilement de ne pas apparaître jusqu'à ce que le wrapper, et seul l'emballage est plus grande que l'écran?

Je n'arrive pas à obtenir ce que vous voulez dire. Pourriez-vous fournir, par exemple, une capture d'écran ou quelque chose?
J'ai mis à jour ma réponse en fonction de votre informations supplémentaires.

OriginalL'auteur Lars Kanto | 2011-03-20

Après vos éclaircissements, je comprends le problème.

Vous pouvez contourner ce problème en ajoutant un élément wrapper, et du don que overflow: hidden, et un min-width.

Démo

HTML:

<div id="outerContainer">
    <div id="container">
        <div id="left">left</div>
        <div id="right">right</div>
        text
    </div>
</div>

CSS:

html, body {
    margin: 0; padding: 0; border: 0
}

#outerContainer {
    overflow: hidden;
    min-width: 300px
}
#container {
    margin: 0 auto;
    width: 300px;
    background: #ccc;
    position: relative
}

#left, #right {
    position: absolute;
    background: #666;
    width: 60px
}
#left {
    left: -60px
}
#right {
    right: -60px
}

Juste ajouté un peu plus d'info, pourquoi je pense que je ne peut pas le faire à votre façon.

OriginalL'auteur thirtydot

1

J'ai eu le même problème et fini par le résoudre à l'aide de requêtes de média. Dans mon cas, je voulais avoir un draggable /redimensionnable barre latérale positionnée en partie hors de l'écran (si la largeur de la fenêtre autour de 1000px) avec pas de barre de défilement horizontale.

Mais si la largeur de la fenêtre est inférieure à 960 px (le conteneur principal largeur est de 960), la barre de défilement horizontal doit être présent pour que l'utilisateur puisse voir tous les.

Le balisage:
```
<div class="container">
    <div class="main">
        <p>Main content</p>
    </div>
    <div class="sidebar">
        <p>
          Sidebar content
        </p>
    </div>
</div>
```
Le CSS
```
.container {width:960px;margin:0 auto;position:relative;}
.main {padding-right:100px}
.sidebar {width:400px;position:absolute;top:0;right:-100px}

 //The fix:
@media only screen and (min-width: 960px) {
 html {overflow-x:hidden} //no scroll if window width is > 960px
}
```
OriginalL'auteur Shift-e

Vous devez vous connecter pour publier un commentaire.