css 100% de la largeur de la div ne prenant pas toute la largeur du parent

J'ai deux divs sur une page. un grille-conteneur qui prend un fond et un interne de la grille qui doit être placé au centre de la grille d'autres. Mon css:

html, body{ 
  margin:0;
  padding:0;
  width:100%;
}
#grid-container{
  background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
  width:100%;
}
#grid{
  width:1140px;
  margin:0px auto;
}

À ce stade, le bg de l'image de la #grille-conteneur seulement remplit la fenêtre, et non pas la totalité de la largeur de l'html. Le symptôme, c'est que si vous réduisez la fenêtre du navigateur de sorte qu'une barre de défilement horizontale est nécessaire et l'actualisation de la page, le bg de l'image se termine lorsque la fenêtre du navigateur se termine. Quand je scroll vers la droite, le bg de l'image n'est pas là. Des idées?

EDIT: ok, selon les demandes, j'ai édité mon css/html. Quand j'enlève la largeur de la désignation de la #grille-conteneur, il s'ajuste à la largeur du conteneur à l'intérieur, ce qui est encore pire. Voici ce que j'ai maintenant:

html, body{ 
  margin:0;
  padding:0;
  min-width:1140px;
}
body{
    background:url(../images/page-background.jpg) repeat-x top left !important; 
    height:100%;
}
#grid-container{
  background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
  padding-top:1px;
}
#grid-container2{
  width:1140px;
  margin:0px auto;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

et le code html:

<!DOCTYPE HTML>
<html>
<head>
---
</head>

<body>
...
<div id="grid-container" class="clearfix">
<div id="grid">..all kinds of things in here</div>
</div>
  • Pouvez-vous ajouter votre code HTML s'il vous plaît?
  • Qui est logique. Vous dire au navigateur pour définir la largeur à 100% du navigateur.
  • Retirez le width:100% et il devrait faire l'affaire. impressivewebs.com/width-100-percent-css
InformationsquelleAutor panzhuli | 2011-08-24
  1. 27

    Le problème est causé par votre #grid avoir un width:1140px.

    Vous devez définir un min-width:1140px sur le body.

    Cela va arrêter le body de se faire plus petit que le #grid. Supprimer width:100% que les éléments de niveau bloc de prendre la largeur disponible par défaut. Live exemple: http://jsfiddle.net/tw16/LX8R3/

    html, body{
    margin:0;
    padding:0;
    min-width: 1140px; /* this is the important part*/
}
#grid-container{
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
}
#grid{
    width:1140px;
    margin:0px auto;
}
    • pour une raison quelconque, le n ° de la grille contenant encore besoin de l'width:100%. Je ne sais pas pourquoi, mais là vous allez. merci!
    • "Supprimer width:100% que les éléments de niveau bloc de prendre la largeur disponible par défaut." - merci tout le confermation je cherchais
    InformationsquelleAutor tw16
  2. 9
    html, body{ 
  width:100%;
}

    Cela indique le code html afin d'être à 100% de largeur. Mais 100% fait référence à l'ensemble de la largeur de la fenêtre du navigateur, donc pas plus que cela.

    Vous pouvez définir une largeur min à la place.

    html, body{ 
  min-width:100%;
}

    De sorte qu'il sera à 100%, au minimum, bot plus si nécessaire.

    InformationsquelleAutor Jose Faeti
  3. 6

    Supprimer la width:100%; déclarations.

    Les éléments de bloc doit prendre toute la largeur disponible par défaut.

    • C'est faux. hasard des choses pour arriver à la pleine longueur des commentaires
    • Yep, si ce n'est pas de 100%, l'affichage est mauvais, ou un problème avec le parent.
    InformationsquelleAutor Geert