2009-10-17 7 views
1

J'ai un arrière-plan de conteneur défini dans CSS comme ceci;CSS conteneur ne se développe pas avec la grille?

.container { 
    background:#fff; 
    margin-left:auto; 
    margin-right:auto; 
    position: relative; 
    width:970px; 
    border:1px solid #000; 
    padding:5px 10px; 
} 

Le problème est que j'ai un jqGrid mis dans le fond du récipient (près du bord inférieur) et lorsque son départ dessiné ne correspond à l'intérieur du panneau de réservoir et semble correct. Quelque chose comme ça (s'il vous plaît pardonnez mon skillz graphique non-l33t):

alt text http://img67.yfrog.com/img67/7162/screenshot002f.jpg

Mais quand je remplir la grille avec des lignes, il devient trop le récipient et il semble vraiment mauvais goût, quelque chose comme ça (je cerclé l'original bords de fond du conteneur):

alt text http://img80.yfrog.com/img80/5419/screenshot003fr.jpg

Je suis sûr que ce que je fais mal avec le CSS. Tout avis sera le bienvenu.

EDIT: Le problème n'est pas la largeur de sa hauteur du récipient étant recouverte par la nouvelle hauteur de la grille maintenant peuplée

Répondre

2

J'ai vu cela se produire plusieurs fois quand vous avez des flotteurs à l'intérieur. Ajoutez une division de libération juste avant de fermer le conteneur. Vous devriez toujours nettoyer après les flotteurs. Je ne suis pas d'accord avec adding float to container. Bien que cela fonctionne, avoir des flotteurs inutiles vous donnera plus de problèmes sur la route. N'utilisez les flotteurs que lorsque c'est nécessaire et effacez-les lorsque vous avez fini de flotter.

Aussi dans mon expérience, overflow ne veut rien dire ici sauf si vous définissez height. Je ne pense pas que le réglage du débordement sur le conteneur résout le problème ici. Corrigez-moi dans les commentaires si je me trompe.

+0

Ajout de débordement: masqué contient automatiquement des flottants. (C'est beaucoup plus facile que clearfix, aussi.) Si vous avez une hauteur déclarée, il va la couper - sinon, il suffit de les contenir. Bien sûr, rien d'autre ne peut échapper au conteneur non plus. +1 pour conseiller de ne pas tout faire flotter, cependant. –

0

Votre conteneur est une largeur fixe et ne se développera pas. Ce que vous cherchez probablement, c'est min-width. En d'autres termes, le changement:

width:970px; 

à:

min-width:970px; 

Comme une note, IE 6 et 7 largeur de traitement en largeur min, mais les autres navigateurs ne le font pas.

+0

ok merci quoi que ce soit sur la hauteur? – CmdrTallen

+0

Je pense que vous vouliez dire l'inverse. IE6 ne comprend pas min-width. Il le traite comme la largeur. –

0

Je pense que vous avez besoin dans votre CSS:

overflow: auto; 
+0

http://www.w3schools.com/Css/pr_pos_overflow.asp a d'autres options et informations liées à cela. –

+0

C'est bizarre pour moi de voir comment cela étend le conteneur mais montre des barres de défilement à la fois vert et horz. Il semble qu'il devrait y avoir un moyen de simplement redimensionner le conteneur d'arrière-plan et de ne pas afficher les barres de défilement. – CmdrTallen

+0

Il y a. Débordement caché. –

2
.container { overflow:hidden; } 

en supposant que vous avez affaire à des flotteurs, c'est un moyen de rendre le récipient contiennent effectivement eux.

0

Selon votre situation de flottement pour le conteneur et la grille intérieure, vous pouvez faire un certain nombre de choses différentes. Vous pourriez être en mesure de s'en tirer en ajoutant simplement un

clear:both; 

Vous pouvez également faire flotter le parent. C'est ce qu'on appelle, en définissant un flotteur pour réparer un flotteur. Donc, si votre grille a une

float:left; 

Ensuite, vous pouvez simplement ajouter

float:left; 

à votre conteneur css. J'aime vraiment le Complex Spiral article on containing floats.

Questions connexes