位置固定宽度100％

Question

我有一个position:fixed左列250px宽，100％高度，我试图在顶部放置一个固定的流畅水平条，但是在左列的右侧，如下例所示：< / p>

但这就是我要来的地方：

这就是我所做的：

JSFIDDLE

.page-wrapper, html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.left-column {
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    width:250px;
    height:100%;
    background:#090909;
}

.top-bar {
    position:fixed;
    top:0;
    left:250px;
    width:100%;
    height:54px;
    background:#090909;
    z-index:1000;
}

如何使这个固定的顶栏跨越屏幕宽度的100％，而不会溢出。我希望这是一个简单的解决方案，因为我花了很多时间构建一个相当复杂的响应式模板，并且在添加内容之后注意到，我顶部栏右侧的内容正在屏幕上消失！

我确实有一个想法，但可能不是最理想的，所以首先对其他建议感兴趣。左侧固定列可以被赋予比顶部条更高的z-index值，从顶部条移除左边距，而是在顶部条内容上放置左边距，与左列的宽度相同。听起来令人困惑但可能。

Answer 1

非常简单的解决方案，不需要最新的CSS版本，根本不设置width。而只需设置right: 0，这将强制顶部栏的右边框位于右边框，如this fiddle中所示。

.top-bar {
    position:fixed;
    top:0;
    left:250px;
    right:0;
    height:54px;
    background:#090909;
    z-index:1000;
}

我添加了一个红色边框，因此更容易看到框的结束位置。

Answer 2

而不是left: 250px与padding-left:250px一起使用box-sizing: border-box：

.top-bar {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:54px;
    background:#090909;
    z-index:1000;
    padding-left: 250px;
    -moz-box-sizing: border-box:
    box-sizing: border-box:
}

<强> FIDDLE

Answer 3

试试这个

.left-column {
    float:left;
    width:150px;
    height:100px;
    background:#090909;
    color:white;
}

.top-bar {
    margin-left:150px;
    background:yellow;
    border:2px solid red;
}

http://jsfiddle.net/jGP5Y/87/