CSS: Graphique sortant du conteneur

Question

Je ne suis pas sûr d'où est-ce contrôlé, pouvez-vous me signaler? Je suis nouveau à CSS.

Le graphique obtient le conteneur lorsque vous redimensionnez la fenêtre. Où contrôlez-vous cela en CSS? Je n'ai pas besoin de redimensionner le graphique, au moins de le cacher? est-ce possible?

J'utilise twitter bootstrap et est ici le code HTML généré

<div class='row-fluid'> 
    <div class='span9'> 
     <div class='box'> 
     <div class='box-content padded' style='text-align: center'> 
      <div id='graphs' style='width:860px; margin:0 auto;' title='test'> 
      <div id='chart' style='display: inline-block;' title='test'></div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class='span3'> 
     <div class='box'> 
     <div class='box-content padded'> 
      Hosts ... 
     </div> 
     </div> 
     <div class='box'> 
     <div class='box-content padded'> 
      <b> Services ... </b> 
      <br> .... </br> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Redimensionner le graphique pour adapter le conteneur parent est facile; il suffit d'utiliser width:100% sur le graphique. Donc, dans votre code, remplacez ce code:

<div id='graphs' style='width:860px; margin:0 auto;' title='test'> 

avec ce code:

<div id='graphs' style='width:100%; margin:0 auto;' title='test'> 

Qu'est-ce qui fait est définit la largeur du graphique en pourcentage de l'élément parent, qui est la div de classe box-content padded . Ainsi, si nous définissons width sur 100%, le graphique correspond toujours à la taille du conteneur.