100% 宽度，固定边距答案

【问题标题】：100% width with fixed margin100% 宽度，固定边距
【发布时间】：2014-06-13 16:18:55
【问题描述】：

#container {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    margin-left: 50px;
    background: black;
    color:white;
}
#sidebar {
    width: 50px;
    position: absolute;
    top: 0;
    left: 0;
    background: blue;
    color: white;
}

我希望 DIV 为width:100%，但左边距为 50px，但不将 div 推到另一端 50px 并启用水平滚动。

我知道使用 jQuery 可以做到这一点：

$('#container').width( $(window).width() - 50 );

但如果可能的话，我只追求 CSS 解决方案。

【问题讨论】：

width : calc(100% - 50px) - 可以使用这个DEMO，更多关于它here
@Ruddy HOLYC！！我什至不知道它的存在。请给它一个答案。谢谢！

标签： jquery html css layout

【解决方案1】：

如果两个 div 都是绝对的，则不要使用宽度。在容器 div 上使用 left:50px 和 right:0。 div 得到相应的宽度。

【讨论】：

非常感谢！！ ;) 接受限制到期后接受答案
虽然其他答案同样令人敬畏，但您的答案也更适合一些旧版浏览器。

【解决方案2】：

试试这个：

width : calc(100% - 50px) !important;

【讨论】：

【解决方案3】：

所以确实有这样的东西：width : calc(100% - 50px)。我建议先阅读它（有限的浏览器支持）。

所以我们可以这样使用它：

#container {
    position:absolute;
    top:0;
    left:0;
    margin-left: 50px;
    background: black;
    color:white;
    width : calc(100% - 50px)
}

DEMO HERE

还有更多关于它here

【讨论】：