2008-11-03 4 views
7

Je n'arrive pas à insérer le div interne (avec Hello World) dans le div "box" dans cet exemple de code (également au http://www.toad-software.com/test.html).La division interne dépasse les limites div externes

Bien que le corps soit réglé à 100%, la div interne ne sera pas contenue! Ceci est un cas de test pour un projet plus important dans lequel une table de largeur variable dépasse les limites de son conteneur. La table serait dans le div interne et le conteneur serait la "boîte".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     /*html { width: 100%; height: 100%; position: relative; background: #c0c0c0; } 
     body { position: absolute; width: 100%; height: 100%; background: #f9f9f9; }*/ 

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

     body 
     { 
      width: 100%; 
     } 

     div.box 
     { 
      padding: 10px; 
      background: #ff33ff; 
     } 

    </style> 
</head> 
<body> 
    <div class="box"> 
     <div style="width: 1500px; height: 900px; background: #f12;">Hello World</div> 
    </div> 
</body> 
</html> 
+2

L'objectif est-il de faire croître le div contenant, ou de réduire la div contenue? –

Répondre

7

La largeur de 100% sur l'élément du corps est par rapport au port de vue, ce qui est la raison pour laquelle vous êtes la couleur d'arrière-plan est la coupe lorsque vous faites défiler. Soit définir une largeur de votre corps à 1520px à encompase le contenait div ou ajouter un autre div et procédez comme suit:

div.box { width: 100px; overflow: auto; } 

Cependant, comme un mot d'avertissement, se dirigeant sur le chemin de défilement horizontal est une mauvaise idée un premier projet en CSS et en expérience utilisateur.

9

ajouter overflow:hidden; au conteneur <div>

+1

+1: Merci, mec. M'a aidé à sortir d'une confiture. –

Questions connexes