CSS 100% width div ne prend 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 #grid ne remplit que la fenêtre, pas toute la largeur du html. Le symptôme de ceci est que si vous rétrécissez la fenêtre du navigateur de sorte qu'une barre de défilement horizontale est requise et actualisez la page, l'image bg se termine là où la fenêtre du navigateur se termine. Quand je fais défiler vers la droite, le bg image n'est pas là. Des idées?
EDIT: ok, par requêtes, j'ai modifié mon CSS / html. Lorsque je supprime la désignation de largeur dans le conteneur #grid, elle se rétrécit à 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>
3 réponses
Le problème est causé par votre #grid avoir un width:1140px.
, Vous devez définir un min-width:1140px sur body.
Cela empêchera le body de devenir plus petit que le #grid. Supprimer width:100% car les éléments de niveau bloc prennent 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;
}
html, body{
width:100%;
}
Cela indique que le code html est 100% large. Mais 100% se réfère à toute la largeur de la fenêtre du navigateur, donc pas plus que cela.
Vous pouvez définir une largeur minimale à la place.
html, body{
min-width:100%;
}
Donc ce sera 100% au minimum, bot plus si nécessaire.
Supprimez les déclarations width:100%;.
Les éléments de bloc doivent prendre toute la largeur disponible par défaut.