html défilement horizontal

i ont un exemple simple css, et je ne peux pas comprendre le comportement d'un de mes divs, lorsque le défilement horizontal est affiché. alors ... quand ma fenêtre de navigateur doit afficher le défilement horizontal (lorsque la largeur de la fenêtre est inférieure à mon div « contenu » largeur (1024px)), mon div « Pied de page » (qui ont le même parent « de contenu » et 100% largeur), semble obtenir un "espace supplémentaire" sur le côté droit. cet espace se développe quand je réduis la largeur de la fenêtre. des idées sur comment puis-je l'obtenir, ou pourquoi cela arrive? merci!html défilement horizontal

Heres mon code:

css:

<style type="text/css"> 

     html, body { 
      height: 100%; 
      width:100%; 
      font-family:"Arial Black", Gadget, sans-serif; 
      font-size:11px; 
      font-variant:normal; 
      } 

      * { 
      margin: 0; 
      } 

     .wrapper { 
      min-height: 100%; 
      height: auto !important; 
      height: 100%; 
      margin: 0 auto -4em; 
      } 

     #content{ 
      width:1024px; 
      margin:0px auto; 
      background-color:#990; 
      height:780px; 
     } 

     .footer, .push { 
      height: 4em; 
      width:100%; 
      } 

      #footer-content{ 
      height:10px; 
      background-color:#09F; 
      width:100%; 
      } 
     </style>

html:

<body> 
<div class="wrapper"> 
     <div id="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque varius tortor vitae pretium. Quisque magna ipsum, accumsan sit amet pretium sed, iaculis feugiat nibh. Donec vitae dui eros, eu ultricies nulla. Morbi aliquet, nisi in tincidunt rutrum, nisl justo sagittis nisi, nec dignissim orci elit vitae tortor. </p> 
     </div> 
     <div class="push"></div> 
    </div> 
    <div class="footer" style="background-color:#900; width:100%;"> 
     <div id="footer-content"></div> 
    </div> 
</body>

Source

2010-04-16 mp.

Je vais aller avec ceci est un effet secondaire d'avoir une largeur statiquement définie pour votre contenu DIV et ayant la largeur de bas de page définie comme 100%.

Si vous remarquez que la largeur de la section de largeur de 100% correspond toujours à la largeur visible de la fenêtre, tandis que la section reste toujours définie statiquement une taille statique (comme on peut s'y attendre). Lorsque la taille de la fenêtre augmente, la section Largeur de 100% se développe pour remplir cette taille. Lorsque la taille de la fenêtre se contracte, elle se contracte pour remplir uniquement cette fenêtre. Dans ce dernier cas où la fenêtre descend au-dessous 1024px la DIV statique reste à 1024 et la DIV dynamique diminue pour s'adapter à la fenêtre, vous obtenez la barre de défilement en bas parce que vous avez le contenu statique en dehors de la largeur visible de la fenêtre. Vous faites défiler sur le côté et la div dynamique reste la même taille, ce qui est la largeur visible de la fenêtre, puis vous voyez un espace blanc à côté de lui.

Une solution serait de faire la section 1024 une largeur de pourcentage, soit 80%, de cette façon il se contracte et se dilate avec la partie inférieure. Soit cela ou définir min-width: 1024px sur votre section 100%.

Source

2010-04-16 19:50:30 Harv

html défilement horizontal

Répondre

Questions connexes