Pas de barre de défilement horizontale sur le flotteur droit

<html> 
<head> 
<style type="text/css" rel="stylesheet"> 
    * {margin:0;padding:0;} 

    div#box {background-color:green;width:1000px;} 

    /* #box {position:absolute;top:0;right:0;} */ 
    /* #box {position:absolute;top:0;left:0;} */ 
    /* #box {float:right;} */ 
    #box {float:left;} 

    .clearer {clear:both;} 
</style> 
</head> 
<body> 
    <div id="box"> 
     asdafdsf 
    </div> 
    <div class="clearer"></div> 
</body> 
</html>

Décommentez le premier identificateur de gauche avec le flotteur de droite et vous verrez. J'ai laissé mes solutions éprouvées commentées.Pas de barre de défilement horizontale sur le flotteur droit

Vous devriez avoir un repro complet à partir d'un copier-coller.

Source

2009-10-27 jdelator

Qu'est-ce que doctype utilisez-vous? –

Je n'en spécifie pas. Que devrais-je être? – jdelator

Je ne crois pas qu'il y ait moyen de contourner cela sans utiliser javascript. Le navigateur affiche une page relative au coin supérieur gauche de cette page, de sorte que tout ce qui est positionné au-dessus ou à gauche de ce point 0,0 est hors de l'écran. Tout débordement arrive au fond et à la droite. C'est la même chose avec le contenu à l'intérieur de n'importe quel élément de bloc. Donc, si vous avez un élément positionné par rapport au côté droit de la page, plus large que 100% de largeur. La partie située à gauche du point d'origine 0,0 sera simplement hors écran.

J'aimerais que quelqu'un me prouve le contraire.

est ici une solution javascript qui fonctionne:

<html> 
<head> 
<style type="text/css" rel="stylesheet"> 
    * {margin:0;padding:0;} 
    div#box {background-color:green;width:1000px;} 
    #box {position:absolute;top:0;left:0;} 
    .clearer {clear:both;} 
</style> 
</head> 
<body> 
    <div id="box"> 
     asdafdsf 
    </div> 
    <div class="clearer"></div> 
    <script type="text/javascript"> 
     function layout() { 
      if(typeof(window.innerWidth) == 'number') 
       this.screenWidth = window.innerWidth; 
      else //patch for IE 
       this.screenWidth = document.body.clientWidth; 
      this.el = document.getElementById('box') 
      if (this.el.offsetWidth > this.screenWidth) 
       window.scroll(this.el.offsetWidth,0); 
      else 
       this.el.style.left = (this.screenWidth - this.el.offsetWidth) + 'px'; 
     } 
     function eventListener(el,action,func) { 
      if (el) { 
       if (el.addEventListener) 
        el.addEventListener(action, func, false); 
       else if (el.attachEvent) 
        el.attachEvent('on' + action, func); 
      } 
     } 
     eventListener(window,'resize',layout); 
     layout();   
    </script> 
</body> 
</html>

Source

2009-10-27 23:35:40 Travis

J'ai eu (ce que je pense peut-être) un problème similaire où je voulais à droite aligner un élément de toile qui est plus large que la div qui le tient. La div est d'environ 300px, l'élément de toile d'environ 1000px.

En utilisant float: right, le canevas était aligné à droite mais les barres de défilement sur le div ont disparu.

Je résolu cela avec jQuery en utilisant scrollLeft() pour régler le défilement initial en fonction des largeurs de div et toile, semblable à:

$("#div").scrollLeft(canvas.width() - div.width())

Source

2015-03-31 01:23:10

Pas de barre de défilement horizontale sur le flotteur droit

Répondre

Questions connexes