Css 使用动态宽度的SASS/Compass数学

我有一个灵活宽度（90%）的容器div。我希望它的子div在宽度方面总是比父div小180px

我知道这可以在JS中实现，但我正在尝试使用尽可能多的CSS。我有一种感觉，这超出了CSS的能力范围，但我想确定一下

我想得到子对象的宽度（以px为单位），然后减去180px。可能吗

标记：

<div id="main">
    <div class="block"></div>
</div>

#main {
  width: 90%;
  max-width: 1600px;

  .block {
    /* incorrect code: */
    width: WIDTH_OF_PARENT - 180px;
  }
}

---

要具体回答您的问题，您可以使用

calc

-webkit-calc(100% - 180px)
-moz-calc(100% - 180px)
calc(100% - 180px)

---

但是，我建议您使用css中的calc函数：

width: calc(100%-180px);

---

calc

是一个anwser:IE9+：

可能建议使用

框大小：边框框

以避免混淆。

注意。如果要将内部div居中，那么简单的90px侧边距也会起作用：

CSS calc（）函数的支持率很低（特别是在移动浏览器中）。如果要最大限度地利用浏览器支持，请改用页边距：

---

这将给你（90%-180px）的90%；为什么要使用90%？相关：

支持率较低

翻译为在浏览器中支持率>70%，包括所有现代移动设备browsers@jumpingcode我不想告诉你，但70%的支持还不够好，如果用户不升级，在“所有现代移动浏览器”中工作就没有任何意义。浏览器不支持边界半径或渐变等细微细节是一回事，因为它很少影响用户使用网站的能力。当calc（）支持缺失时，结果几乎总是一个惊人的失败。编辑答案进行技术性修改，不是因为你不同意措辞。我不反对，但你的措辞，对我来说，建议<33%<代码>低是一个主观的衡量标准，但你没有包括任何事实，因此很可能误导人们。我猜有人因为缺乏浏览器支持（尤其是在移动浏览器中）而被否决。这确实回答了这个问题，加上边际的想法是一个优雅的解决方案，将在所有浏览器上工作。。。感谢您的JSFIDLE演示。

CSS

#main {
    margin:25px auto;
    width:90%;
    max-width:1200px;
    border:1px solid green;
    padding:10px;
}

.block {
    border:1px solid red;
    height:25px;
    width: calc(100% - 180px);    
}

#main {
    width: 90%;
    max-width: 1600px;
}
.block {
    margin-left: 180px; /* or margin-left: 90px; margin-right: 90px */
}