Html 位置固定宽度100%

我有一个

position:fixed

left列，宽250px，高100%，我试图在顶部放置一个固定的流体水平条，但位于左侧列的右侧，如下图所示：

但这就是我要说的：

这就是我所做的：

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

---

我有一个想法，但可能不是最理想的，所以我首先对别人的建议感兴趣。左固定列的z索引值可以高于顶栏，从顶栏删除左边距，但在顶栏内容上添加左边距，与左栏的宽度相同。听起来有点混乱，但可能是这样。

不要使用

左：250px

使用

左：250px填充

与

框大小：边框框

：

.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:
}

---

不需要最新CSS版本的非常简单的解决方案根本不设置

宽度。相反，只需将
设置为right:0
，这将强制顶部栏的右边框位于右边框处，如中所示

我添加了一个红色边框，以便更容易看到方框的结尾。
试试这个

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

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

一把js小提琴会让你的
更轻松。顶栏的宽度必须设置为
100%-250px
很好！谢谢你睁开我的眼睛。我以前从未同时使用过左右定位。我知道这会很简单：）如果我希望div的宽度为其父级的100%，而不是文档的宽度，该怎么办？有人知道CSS3的方法吗？@MattVoda只是使用相同的代码？仅仅因为它在CSS2中工作不会使它在CSS3中无效（至少在大多数情况下是如此）。问题是关于“位置：已修复”
.top-bar {
    position:fixed;
    top:0;
    left:250px;
    right:0;
    height:54px;
    background:#090909;
    z-index:1000;
}

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

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