Question

http://jsbin.com/manez/1/

#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的解决方案。

Answer 1

如果两个div都是绝对的，那么不要使用宽度。使用left:50px＆amp;容器div上的right:0。 Div相应地获得宽度。

Answer 2

试试这个：

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

Answer 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

的信息

100％宽度，固定边距

3 个答案: