位置固定宽度100％

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

但这就是我要到达的地方：

这是我所做的：

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值可能会比顶栏的z-index值高，从顶栏删除左页边距，而是在左栏的内容上放置左页边距，与左栏的宽度相同。听起来令人困惑，但可能。

不需要最新CSS版本的非常简单的解决方案根本没有设置width。取而代之的是设置right: 0，这将迫使顶栏的右边界位于右边界，如此小提琴所示。

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

我添加了红色边框，因此更容易看到框的结尾。

而不是与left: 250pxusepadding-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:
}

小提琴

尝试这个

.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/