在 CSS 中，我该如何做这样的事情：
width: 100% - 100px;
我想这很简单，但很难找到例子来说明这一点。
【问题讨论】：
width: calc(100% - 100px);，这是几个答案，我希望提问者能更新他的问题:) :)
现代浏览器现在支持：
width: calc(100% - 100px);
要查看支持的浏览器版本列表，请查看：Can I use calc() as CSS unit value?
有一个 jQuery 后备：css width: calc(100% -100px); alternative using jquery
【讨论】：
calc(100% - 6px) 时发现，例如它显示为calc(94%)，我必须按如下方式对其进行转义，现在它可以工作width: calc(~"100% - 6px");
-（或+）字符周围必须有空格。这有效：calc(100% - 100px); 而这无效：calc(100%-100px);
padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);，如果必须修改0.25em，现在必须在两个地方更改它。
您能否将带有margin-left: 50px; 和margin-right: 50px; 的div 嵌套在带有width: 100%; 的<div> 中？
【讨论】：
你可以试试这个……
<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);vw：视口宽度
vh: 视口高度
【讨论】：
calc(100% - 6px) 时发现，例如它显示为calc(94%)，我不得不按如下方式对其进行转义，现在它可以工作width: calc(~"100% - 6px");
只有在我检查了所有空格后，它才开始为我工作。
所以，它不能像这样工作：width: calc(100%- 20px) 或 calc(100%-20px) 并与 width: calc(100% - 20px) 完美配合。
【讨论】：
你需要有一个容器来存放你希望 100% - 100px 的内容 div
#container {
width: 100%
}
#content {
margin-right:100px;
width:100%;
}
<div id="container">
<div id="content">
Your content here
</div>
</div>
如果您的内容 div 溢出，您可能需要在最后一个 </div> 之前添加一个清除 div。
<div style="clear:both; height:1px; line-height:0"> </div>
【讨论】：
我的代码，它适用于 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>
【讨论】：
将主体边距设置为 0，将外部容器的宽度设置为 100%，并使用具有 50 像素左右边距的内部容器似乎可行。
<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>
【讨论】：
在使用引导面板时，我正在寻找如何在标题面板中放置“删除”链接，这样不会被长邻居元素遮挡。这是解决方案：
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; }
当然，您可以根据缩进修改“top”和“right”值。 Source
【讨论】：
你能做到吗：
margin-right: 50px;
margin-left: 50px;
编辑：我的解决方案是错误的。 Aric TenEyck 发布的解决方案建议使用宽度为 100% 的 div，然后使用边距嵌套另一个 div 似乎更正确。
【讨论】：
width:100% 时才会出现这种情况。 div 将自动填充容器，除非您覆盖它，例如通过显式指定width，或使用float 或绝对定位。向 div 添加边距只会使其填充其容器，减去边距指定的数量。
在外层 div 上进行填充会得到想要的效果。
<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>
【讨论】：
对于这种常见情况，有两种技术可以派上用场。各有各的缺点，但有时两者都有用。
box-sizing:border-box 在项目的宽度中包含填充和边框宽度。 例如，如果您将具有 20px 20px padding 和 1px 边框的 div 的宽度设置为 100px，则实际宽度将为 142px，但使用边框框时，padding 和 margin 都在 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;
}
这是一篇很棒的文章：http://css-tricks.com/box-sizing/，这是一个小提琴http://jsfiddle.net/L3Rvw/
然后是 position: absolute
.padded{
position: absolute;
top: 50px;
right: 50px;
left: 50px;
bottom: 50px;
background-color: #aefebc;
}
当然，两者都不是完美的，box-sizing 并不完全适合这个问题，因为元素实际上是 100% 宽度，而不是 100% - 100px（但是一个子 div 会是）。而且绝对定位绝对不能在所有情况下都使用，但通常只要设置了父级高度就可以了。
【讨论】：
CSS 不能用于动画，或对事件进行任何样式修改。
唯一的方法是使用一个javascript函数，它会返回给定元素的宽度，然后减去100px，并设置新的宽度大小。
假设你使用的是 jQuery，你可以这样做：
oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);
使用原生 javascript：
oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';
我们假设你的 css 样式设置为 100%；
【讨论】：
您使用的是标准模式吗？我认为这个解决方案取决于它。
如果您尝试制作 2 列，您可以执行以下操作：
<div id="outer">
<div id="left">
sidebar
</div>
<div id="main">
lorem ispsum etc...
</div>
</div>
然后使用 CSS 设置样式：
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;
}
如果您不想要 2 列，您可以删除 <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>
【讨论】：
您可以考虑使用 LESS，这是一个 JavaScript 文件，可对您的 CSS 进行预处理，以便您可以在 CSS 中包含逻辑和变量。因此，对于您的示例，在 LESS 中，您将编写 width: 100% - 100px; 以实现您想要的：)
【讨论】：
你不能。
但是，您可以使用边距来产生相同的结果。
【讨论】：
这行得通：
margin-right:100px;
width:auto;
【讨论】：
简短的回答是你不要在 CSS 中这样做。 Internet Explorer 支持一种称为 CSS 表达式的功能，但这不是标准的，而且其他浏览器（例如 FireFox）绝对不支持。
最好在 JavaScript 中执行此操作。
【讨论】：