CSS, de prise de tête et de pied de conserver 100% de la largeur du navigateur pour le redimensionner

J'ai presque eu ce compris en utilisant les questions précédentes, mais je suis confronté à un petit problème.

J'ai besoin de mon en-tête et pied de page pour durée de 100% de la page quand j'ai redimensionner le navigateur, et j'ai résolu ce problème pour la plupart, à l'aide de min-width sur l'en-tête et pied de page. L'en-tête se comporte très bien, mais le pied de page a un peu de blanc d'espace sur le droit, à tout moment. De l'aide?
REMARQUE: L'espace blanc se produit uniquement sur navigateur redimensionner (en plus petit), et il est également espacés à tout moment. 

html,
body {
 margin:0;
 padding:0;
 height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
   min-width:1100px;
   }
#body {
  padding:10px;
  padding-bottom:60px;   /* Height of the footer */
 }
#footer {
 position:absolute;
  bottom:0;
  width:100%;
  height:60px;   /* Height of the footer */
  background:#6cf;
   min-width:1100px;
}

<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>

EDIT: j'ai changé min-width dans le pied de page pour être 1120px comme un bandaid solution, et cela fonctionne pour le moment. Pourquoi est-ce travailler??

InformationsquelleAutor varatis | 2011-10-07
  1. 4

    Votre problème est que vous définissez padding:10px; et min-width:1100px; sur votre tête pendant que vous définissez min-width:1100px; sur votre pied de page. Que vous cause votre espace blanc.

    Essayer quelque chose comme ceci à la place:
    http://jsfiddle.net/hrkp6/

    InformationsquelleAutor Simon Arnold
  2. 1

    Le rembourrage dans votre tête vous visse jusqu'ici.

    Je l'ai enlevé et il a une hauteur fixe pour cette démo...

    http://jsfiddle.net/BA2UY/

    C'est parce que padding est ajouté les dimensions de l'élément qui le rend plus large que vous spécifiez.

    InformationsquelleAutor Sparky
  3. 0

    Essayer avec ceci:

    #footer {
 position:absolute;
  bottom:0;
  left: 0;
  right: 0;
  height:60px;   
  background:#6cf;
  /* get rid of min-width */
}
    • whhat se produit lorsque le contenu recouvre le pied de page?
    • -- Non, désolé, ça ne fonctionne pas. Il m'amène au problème que j'avais avant, qui est si j'ai redimensionner le navigateur, il y a un laid sur les espaces de défilement-dessus. Merci pour l'entrée si.
    • La même chose se produire avec ton code actuel, apparaissent soit en haut ou en bas, selon les z-index.
    • Rien de mal à avoir un min-width ici... il va tout simplement faire une barre de défilement au lieu de gâcher son contenu.
    • Ouais je sais, mais mon en-tête fonctionne correctement pour le moment. Je suis curieux de savoir pourquoi mon pied de page est à agir différemment?
    • Pensez à utiliser les plugins gratuits [firebug][1] + [firepath][2] afin de mieux caractériser le problème. Cette commune combo d'outils vous aidera à interroger mise en page web et voir le css qui est de contribuer à des articles de l'écran. [1]: getfirebug.com [2]: addons.mozilla.org/en-US/firefox/addon
    • mon commentaire était adressé à l'auteur de la réponse. Voir ma réponse, votre rembourrage dans l'en-tête est la racine de votre problème.
    • ne pas utiliser le corps à deux reprises. Vous avez déjà un élément du corps. renommer comme contenu

    InformationsquelleAutor methodofaction