web-dev-qa-db-fra.com

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

Il y a peut-être une solution simple à cela, mais cela me trouble depuis longtemps ...

Laisse-moi expliquer la situation. J'ai un div avec l'ID 'conteneur' qui contient tout le contenu de la page (y compris l'en-tête et le pied de page également) qui gardera tout en ligne et je peux faire juste une simple 'marge: 0 auto;' au lieu de multiples. Disons donc que la largeur de #container est définie à 80%. Maintenant, si je mets un autre div à l'intérieur avec la même largeur (80%) et lui donne l'ID de 'en-tête' avec 10px de remplissage, la présentation "se casse" (pour ainsi dire) car la page ajoute le montant de remplissage à la largeur. Alors, comment puis-je le faire rester dans les limites sans utiliser de méthodes telles qu'un pourcentage inférieur pour la div #header? En gros, je veux le rendre fluide.

Voici un exemple de code pour vous donner une idée de ce dont 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 ce problème qui m'embête depuis toujours?

csspaddingfluid-layout
54
Kyle Ross

Si vous voulez le #header pour avoir la même largeur que votre conteneur, avec 10px de remplissage, vous pouvez omettre sa déclaration de largeur. Cela le fera occuper implicitement toute la largeur de son parent (puisqu'un div est par défaut un élément de niveau bloc).

Ensuite, puisque vous n’avez pas défini de largeur dessus, le remplissage de 10px sera correctement appliqué à 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 le voir en action ici .

La clé lors de l’utilisation de largeurs en pourcentage et de marges/marges en pixels n’est pas de les définir sur le même élément (si vous souhaitez contrôler avec précision la taille). Appliquez le pourcentage de largeur au parent, puis le remplissage/la marge de pixels à un display: block enfant sans largeur définie.

Mettre à jour

Une autre option consiste à utiliser la règle CSS box-sizing :

#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 article qui explique comment la taille de la boîte fonctionne .

90
Pat

Vous pouvez également utiliser la fonction CSS calc () pour soustraire la largeur de votre remplissage du pourcentage de la largeur de votre conteneur.

Un exemple:

width: calc((100%) - (32px))

Veillez simplement à ce que la largeur soustraite soit égale au remplissage total et non à la moitié. Si vous complétez les deux côtés du div interne avec 16px, vous devez alors soustraire 32px de la largeur finale, en supposant que l'exemple ci-dessous correspond à ce que vous souhaitez obtenir.

.outer {
  width: 200px;
  height: 120px;
  background-color: black;
}

.inner {
  height: 40px;
  top: 30px;
  position: relative;
  padding: 16px;
  background-color: teal;
}

#inner-1 {
  width: 100%;
}

#inner-2 {
  width: calc((100%) - (32px));
}
<div class="outer" id="outer-1">
  <div class="inner" id="inner-1"> width of 100% </div>
</div>

<br>
<br>

<div class="outer" id="outer-2">
  <div class="inner" id="inner-2"> width of 100% - 16px </div>
</div>
4
Ian Gradert

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

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