CSS Div largeur en pourcentage et remplissage sans briser la mise en page

Question

Il y a peut être une solution simple pour cela, mais il a me préoccupait depuis des siècles maintenant...

Laissez-moi vous expliquer la situation. J'ai une div avec l'ID "container" qui contient tout le contenu de la page (y compris en-tête et pied de page aussi) qui permettra de maintenir le tout en ligne et je peux le faire 1 simple "margin:0 auto;" au lieu de "multiples". Donc disons que j'ai la largeur de #container est fixé à 80%. Maintenant, si je mets une autre div à l'intérieur avec la même largeur (80%) et de lui donner l'ID de 'tête' avec 10px de rembourrage tout autour, la disposition "pause" (façon de parler) parce que la page ajoute le rembourrage en montant sur la largeur. Alors, comment puis-je le faire rester dans les limites sans l'aide de méthodes comme un pourcentage inférieur pour l'en-tête #div? Fondamentalement, je veux le rendre fluide.

Voici un exemple de code pour vous donner une idée de ce à quoi je parle...

CSS

#container {
    position:relative;
    width:80%;
    height:auto;
}
#header {
    position:relative;
    width:80%;
    height:50px;
    padding:10px;
}

HTML

<div id="container">
    <div id="header">Header contents</div>
</div>

Quelqu'un peut-il m'aider avec cette question qui a été mise sur écoute moi pour toujours?

Answer 1

Si vous voulez l' #header à la même largeur que votre conteneur, avec 10px de rembourrage, vous pouvez laisser sa largeur de déclaration. Qui vont le faire implicitement de prendre la totalité de son parent largeur (depuis un div par défaut d'un élément de niveau bloc).

Alors, puisque vous n'avez pas défini une largeur sur elle, la 10px de rembourrage sera appliqué correctement l'intérieur de l'élément, plutôt que d'ajouter à sa largeur:

#container {
    position: relative;
    width: 80%;
}

#header {
    position: relative;
    height: 50px;
    padding: 10px;
}

Vous pouvez la voir en action ici.

La clé lors de l'utilisation de pourcentage de la largeur et de pixel rembourrage/marges est de ne pas les définir sur le même élément (si vous voulez contrôler avec précision la taille). Appliquer le pourcentage de la largeur de la mère et de l', alors le pixel padding/margin à un display: block enfant sans largeur.

---

Mise à jour

Une autre option pour éviter cela est d'utiliser la box-sizing règle CSS:

#container { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    /* Since this element now uses border-box sizing, the 10px of horizontal
       padding will be drawn inside the 80% width */
    width: 80%;
    padding: 0 10px;
}

Voici un post parlant de box-sizing œuvres.

Answer 2

Essayez de supprimer les position de header et ajoutez overflow à container :

 #container {
    position:relative;
    width:80%;
    height:auto;
    overflow:auto;
}
#header {
    width:80%;
    height:50px;
    padding:10px;
}