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 le montrant.
18 réponses
Les navigateurs modernes prennent désormais en charge:
width: calc(100% - 100px);
Pour voir la liste des versions de navigateur prises en charge checkout: Puis-je utiliser calc() comme valeur unitaire CSS?
Il y a un repli jQuery: CSS width: calc (100% -100px); alternative en utilisant jquery
Pourriez-vous imbriquer un div avec margin-left: 50px; et margin-right: 50px; dans un <div> avec width: 100%;?
Vous pouvez essayer ceci...
<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);VW: largeur de la fenêtre
Vh: hauteur de la fenêtre
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%;
}
<div id="container">
<div id="content">
Your content here
</div>
</div>
Vous devrez peut-être ajouter un div de compensation juste avant le dernier </div> si votre div de contenu déborde.
<div style="clear:both; height:1px; line-height:0"> </div>
Mon code, et cela fonctionne pour IE6:
<style>
#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;}
</style>
<div id="container">
<div id="header">header</div>
<div id="mainContent">
<div id="sidebar">left</div>
<div id="content">right 100% - 100px</div>
<span style="display:none"></span></div>
</div>
Définir les marges du corps à 0, la largeur du conteneur externe à 100%, et utiliser un conteneur interne avec des marges Gauche/Droite 50px semble fonctionner.
<style>
body {
margin: 0;
padding: 0;
}
.full-width
{
width: 100%;
}
.innerContainer
{
margin: 0px 50px 0px 50px;
}
</style>
<body>
<div class="full-width" style="background-color: #ff0000;">
<div class="innerContainer" style="background-color: #00ff00;">
content here
</div>
</div>
</body>
En travaillant avec les panneaux bootstrap, je cherchais comment placer le lien "Supprimer" dans le panneau d'en-tête, qui ne serait pas obscurci par l'élément long neighbour. Et voici la solution:
Html:
<div class="with-right-link">
<a class="left-link" href="#">Long link header Long link header</a>
<a class="right-link" href="#">Delete</a>
</div>
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 sûr, vous pouvez modifier les valeurs " top " et "right", en fonction de vos indentations. Source
Pourriez-vous faire:
margin-right: 50px;
margin-left: 50px;
Edit: Ma solution est fausse. La solution publiée par Aric TenEyck suggérant d'utiliser un div avec une largeur de 100% , puis d'imbriquer un autre div en utilisant les marges semble plus correcte.
Le remplissage sur la div externe obtiendra l'effet désiré.
<html>
<head>
<style>
#outer{
padding: 0 50px;
border:1px solid black; /*for visualization*/
}
#inner{
border:1px solid red; /*for visualization*/
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
100px smaller than outer
</div>
</div>
</body>
</html>
Il y a 2 techniques qui 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 sur 100px, la largeur réelle serait de 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-tricks.com/box-sizing/ et voici un violon http://jsfiddle.net/L3Rvw/
Et puis il y a position: absolute
.padded{
position: absolute;
top: 50px;
right: 50px;
left: 50px;
bottom: 50px;
background-color: #aefebc;
}
Les deux ne sont pas parfaits bien sûr, le dimensionnement des boîtes ne correspond pas exactement à la question car l'élément est en fait 100% de largeur, plutôt que 100% - 100px(cependant un div enfant serait). Et le positionnement absolu ne peut certainement pas être utilisé dans toutes les situations, mais est généralement correct comme tant que la hauteur parent est définie.
Cela a commencé à fonctionner pour moi seulement quand j'ai vérifié tous les espaces.
Donc, ça n'a pas fonctionné comme ceci: width: calc(100%- 20px) ou calc(100%-20px) et parfaitement travaillé avec 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, soustrayez-y 100px, et définissez la nouvelle taille de 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 CSS défini avec 100%;
Utilisez-vous le mode standard? Cette solution en dépend je pense.
Si vous essayez de faire 2 colonnes, vous pouvez faire quelque chose comme ceci:
<div id="outer">
<div id="left">
sidebar
</div>
<div id="main">
lorem ispsum etc...
</div>
</div>
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 <div id="left">
<div style="width: 200px; border: 1px solid red;">
<br>
<div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
<br>
</div>
<br>
</div>
Vous pouvez utiliser LESS , qui est 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, en moins, vous écririez width: 100% - 100px; pour obtenir exactement ce que vous vouliez:)
La réponse courte est que vous ne le faites pas en CSS. Internet Explorer prend en charge quelque chose appelé Expressions CSS, 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 toutefois utiliser des marges pour obtenir le même résultat.