Comment puis-je faire width = 100% - 100px en CSS ?

Question

En CSS, comment puis-je faire quelque chose comme ceci :

width: 100% - 100px;

Je suppose que c'est assez simple mais c'est un peu difficile de trouver des exemples montrant cela.

Answer 1

Les navigateurs modernes prennent désormais en charge le :

largeur: calc(100% - 100px);

Pour voir la liste des versions de navigateurs prises en charge, consultez : Puis-je utiliser calc() comme valeur d'unité CSS ?

Il existe une alternative jQuery : largeur css : calc(100% -100px); alternative en utilisant jquery

Answer 2

Pouvez-vous imbriquer une div avec margin-left: 50px; et margin-right: 50px; à l'intérieur d'une

avec width: 100%; ?

Answer 3

Mon code, et il fonctionne pour IE6 :

#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:100px; height:500px; background:#cf9;}
#content { margin-left:100px; height:500px; background:#ffa;}

  header

    gauche
    droite 100% - 100px

Answer 4

Vous devez avoir un conteneur pour votre div de contenu que vous souhaitez être à 100% - 100px

#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

      Votre contenu ici

Vous pourriez avoir besoin d'ajouter un div de clarification juste avant le dernier si votre div de contenu dépasse.

Answer 5

En définissant les marges du corps à 0, la largeur du conteneur extérieur à 100%, et en utilisant un conteneur interne avec des marges de 50px à gauche et à droite semble fonctionner.

body {
    margin: 0;
    padding: 0;
}

.full-width
{
    width: 100%;
}

.innerContainer
{
    margin: 0px 50px 0px 50px;
}

      contenu ici