web-dev-qa-db-fra.com

Afficher une largeur de div 100% avec des marges

Je souhaite afficher un div (width: 100%) avec marges ...

Voici mon code:

<div id="page">
    <div id="margin">
        "some content here"
    </div>
</div>​

Et voici mon code CSS:

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: 100%;
  height: 300px;
  margin: 10px;
}​

LIVE DEMO

cssmobilehtml
46
Random78952

Vous pouvez utiliser le CSS suivant pour obtenir le résultat souhaité:

#page {
   background: red;
   overflow: auto;
}

#margin {
   background: green;
   height: 280px;
   margin: 10px
}
11
Daniel Calliess

Vous pouvez utiliser la fonction calc() css ( prise en charge du navigateur ).

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: -moz-calc(100% - 10px);
  width: -webkit-calc(100% - 10px);
  width: -o-calc(100% - 10px);
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}​

Vous pouvez également essayer d'utiliser le remplissage au lieu de margin et box-sizing: border-box ( prise en charge du navigateur ):

#page {
    background: red;
    width: 100%;
    height: 300px;
    padding: 10px;
}

#margin {
    box-sizing: border-box;
    background: green;
    width: 100%;
    height: 300px;
}
69
Vukašin Manojlović

Parfois, il vaut mieux faire le contraire et donner à la place le parent div à la place:

LIVE DEMO

J'ai changé le CSS de #page à:

#page {
    padding: 3%;
    width: 94%; /* 94% + 3% +3% = 100% */

    /* keep the rest of your css */
    /* ... */
}

Supprimez ensuite le margin de #margin

Remarque: cela ajoute également 3% en haut et en bas (donc 6% à la hauteur) ce qui le rend un peu plus haut que 300 px - donc si vous avez besoin exactement de 300 px, vous pouvez faire quelque chose comme padding:10px 3%; et modifiez le height:280px; pour ajouter jusqu'à 300 pixels à nouveau.

14
Andy

Pour les utilisateurs MOINS uniquement:

L'utilisation de la solution Nice de Vukašin Manojlović ne fonctionne pas dès le départ car LESS exécute les opérations + ou - pendant la compilation LESS. Une solution consiste à échapper à MOINS pour ne pas exécuter l'opération.

Désactiver l'écrasement LESS-CSS calc ()

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
width: -o-calc(~"100% - "@someMarginVariable*2);

ou peut utiliser un mixin comme:

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
  @minusValue: (@marginSize+@paddingSize)*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}
4
Sebastien Lorber

Si possible, essayez d'utiliser à la place le remplissage avec le dimensionnement de la boîte, sur l'élément #page

#page {
    padding: 10px;
    box-sizing: border-box;
    background: red;
    float: left;
    width: 100%;
    height: 300px;
}
#margin {
    background: green;
    float: left;
    width: 100%;
    height: 100%;
}
1
Andrew Ost

La manière correcte de réaliser cela en standard est:

#margin {
   background: green;
   height: 280px;
   margin: 10px;
   width: auto;
   display: block;
}
1
Tolly