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

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

width: 100% - 100px; 

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

Les navigateurs modernes prennent désormais en charge:

 width: calc(100% - 100px); 

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

Il y a un repli jQuery: css width: calc (100% -100px); alternative en utilisant jquery

Pourriez-vous nidifier un div avec margin-left: 50px; et margin-right: 50px; à l’intérieur d’un

avec la width: 100%; ?

Vous pouvez essayer ceci …

  width: calc(100% - 100px);  width: calc(100vh - 100px); 

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

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

Vous devrez peut-être append un div de compensation juste avant le dernier si votre div du contenu déborde.

 
 

mon code, et ça marche pour IE6:

  
right 100% - 100px

entrer la description de l'image ici

Définir les marges du corps à 0, la largeur du conteneur externe à 100% et utiliser un conteneur interne avec des marges gauche / droite de 50px semble fonctionner.

   
content here

En travaillant avec des panneaux bootstrap, je cherchais comment placer le lien “delete” dans le panneau d’en-tête, qui ne serait pas masqué par un élément voisin long. Et voici la solution:

html:

  

css:

 .with-right-link { position: relative; width: 275px; } a.left-link { display: inline-block; margin-right: 100px; } a.right-link { position: absolute; top: 0; right: 0; } 

Bien entendu, vous pouvez modifier les valeurs “top” et “right” en fonction de vos empreintes. La source

Pourrais tu:

 margin-right: 50px; margin-left: 50px; 

Edit: Ma solution est fausse. La solution proposée par Aric TenEyck suggérant d’utiliser un div avec une largeur de 100%, puis d’imbriquer un autre div à l’aide des marges semble plus correcte.

Le rembourrage sur la div externe aura l’effet désiré.

      
100px smaller than outer

Deux techniques peuvent être utiles pour ce scénario commun. Chacun a ses inconvénients mais peut être utile à la fois.

box-sizing: border-box inclut le remplissage et la largeur de la bordure dans la largeur d’un article. Par exemple, si vous définissez la largeur d’un div avec un remplissage 20px 20px et une bordure 1px à 100px, la largeur réelle serait 142px mais avec border-box, le remplissage et la marge sont à l’intérieur du 100px.

 .bb{ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; width: 100%; height:200px; padding: 50px; } 

Voici un excellent article à ce sujet: http://css-sortingcks.com/box-sizing/ et voici un violon http://jsfiddle.net/L3Rvw/

Et puis il y a la position: absolue

 .padded{ position: absolute; top: 50px; right: 50px; left: 50px; bottom: 50px; background-color: #aefebc; } 

http://jsfiddle.net/Mw9CT/1/

Bien sûr, aucun des deux n’est parfait, le dimensionnement par boîte ne correspond pas exactement à la question car l’élément a en fait une largeur de 100%, et non de 100% à 100px (cependant, une div enfant serait). Et le positionnement absolu ne peut certainement pas être utilisé dans toutes les situations, mais est généralement acceptable tant que la hauteur parente est définie.

Cela a commencé à fonctionner pour moi seulement quand j’ai vérifié tous les espaces. Donc, cela n’a pas fonctionné comme ceci: width: calc(100%- 20px) ou calc(100%-20px) et parfaitement travaillé avec la width: calc(100% - 20px) .

CSS ne peut pas être utilisé pour l’animation ou toute modification de style sur les événements.

Le seul moyen est d’utiliser une fonction javascript, qui renverra la largeur d’un élément donné, puis de lui soustraire 100px et de définir la nouvelle largeur.

En supposant que vous utilisez jQuery, vous pouvez faire quelque chose comme ça:

 oldWidth = $('#yourElem').width(); $('#yourElem').width(oldWidth-100); 

Et avec javascript natif:

 oldWidth = document.getElementById('yourElem').clientWidth; document.getElementById('yourElem').style.width = oldWidth-100+'px'; 

Nous supposons que vous avez un style de CSS défini à 100%;

Utilisez-vous le mode standard? Je pense que cette solution en dépend.

Si vous essayez de faire 2 colonnes, vous pouvez faire quelque chose comme ceci:

 
sidebar
lorem ispsum etc...

Ensuite, utilisez CSS pour le styliser:

 div#outer { width:100%; height: 500px; } div#left { width: 100px; height: 100%; float:left; background: green; } div#main { width: auto; margin-left: 100px; /* same as div#left width */ height: 100%; background:red; } 

Si vous ne voulez pas 2 colonnes, vous pouvez probablement supprimer

 



Vous pouvez envisager d’utiliser LESS , un fichier JavaScript qui pré-traite votre CSS afin que vous puissiez inclure la logique et les variables dans votre CSS. Donc, pour votre exemple, dans LESS, vous width: 100% - 100px; pour atteindre exactement ce que vous vouliez 🙂

La réponse courte est que vous ne faites pas cela en CSS. Internet Explorer prend en charge quelque chose appelé CSS Expressions, mais ce n’est pas standard et n’est certainement pas pris en charge par d’autres navigateurs comme FireFox par exemple.

Vous feriez mieux de le faire en JavaScript.

Vous ne pouvez pas

Vous pouvez cependant utiliser des marges pour obtenir le même résultat.

Cela marche:

 margin-right:100px; width:auto;