web-dev-qa-db-fra.com

css 100% largeur div n'occupant pas toute la largeur du parent

J'ai deux divs sur une page. un conteneur de grille qui prend un arrière-plan et une grille interne qui doit être positionnée au centre de l'autre grille. 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, l'image bg du conteneur de grille # ne remplit que la fenêtre, pas toute la largeur du code html. Le symptôme de ceci est que si vous rétrécissez la fenêtre du navigateur afin qu'une barre de défilement horizontale soit requise et actualisez la page, l'image bg se termine là où la fenêtre du navigateur se termine. Lorsque je fais défiler vers la droite, l'image bg n'est pas là. Des idées?

EDIT: ok, par requêtes, j'ai édité mon css/html. Lorsque je supprime la désignation de largeur dans le # grid-container, elle se réduit à 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 html:

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

<body>
...
<div id="grid-container" class="clearfix">
<div id="grid">..all kinds of things in here</div>
</div>
csshtml5width
29
panzhuli

Le problème est dû à votre #grid avoir un width:1140px.

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

Cela empêchera le body de devenir plus petit que le #grid. Retirer width:100% car les éléments de niveau bloc occupent la largeur disponible par défaut. Exemple en direct: 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;
}
27
tw16
html, body{ 
  width:100%;
}

Cela indique que le html a une largeur de 100%. Mais 100% fait référence à toute la largeur de la fenêtre du navigateur, donc pas plus que cela.

Vous voudrez peut-être définir une largeur minimale à la place.

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

Ce sera donc 100% au minimum, plus si nécessaire.

9
Jose Faeti

Retirer le width:100%; déclarations.

Les éléments de bloc doivent occuper toute la largeur disponible par défaut.

6
Geert