如何在CSS中做到width = 100％-100px？
Answers:
现代浏览器现在支持：
width: calc(100% - 100px);要查看支持的浏览器版本列表，请参见：可以将calc（）用作CSS单位值吗？
有一个jQuery后备：CSS宽度：calc（100％-100px）; 替代使用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现在必须在两个地方进行更改。
你可以试试这个...
<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);vw：视口宽度
vh：视口高度
calc(100% - 6px)它时，例如，它显示为calc(94%)，我必须按如下所示对其进行转义，现在它可以工作了width: calc(~"100% - 6px");
我的代码，它适用于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>
您需要为内容div设置一个容器，该容器希望是100％-100px
#container {
width: 100%
}
#content {
margin-right:100px;
width:100%;
}
<div id="container">
<div id="content">
Your content here
</div>
</div></div>如果内容div溢出，则可能需要在最后一个div之前添加一个清除div 。
<div style="clear:both; height:1px; line-height:0"> </div>将主体页边距设置为0，将外部容器的宽度设置为100％，并使用左右边距为50px的内部容器似乎可行。
<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”值。资源
仅当我检查了所有空格后，它才开始为我工作。因此，它不是这样工作的：width: calc(100%- 20px)或calc(100%-20px)与完美配合width: calc(100% - 20px)。
你能做：
margin-right: 50px;
margin-left: 50px;编辑： 我的解决方案是错误的。Aric TenEyck发布的解决方案建议使用宽度为100％的div，然后使用边距嵌套另一个div似乎更正确。
width:100%。除非您通过明确指定width或使用float或绝对定位来覆盖它，否则div将自动填充该容器。在div中添加边距只会使它填充其容器，而不是由边距指定的数量。
对于这种常见情况，有两种技术可以派上用场。每个都有其缺点，但有时都可能有用。
box-sizing：边框在项目的宽度中包括填充和边框宽度。例如，如果将具有20px，20px填充和1px边框的div的宽度设置为100px，则实际宽度将为142px，但使用border-box，则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/
然后是位置：绝对
.padded{
position: absolute;
top: 50px;
right: 50px;
left: 50px;
bottom: 50px;
background-color: #aefebc;
}当然，这两者都不是完美的，因为元素实际上是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">
你不能
但是，您可以使用边距来实现相同的结果。
这有效：
margin-right:100px;
width:auto;