为什么我的单杠在设置position:fixed时会溢出容器？

Question

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

但这就是我在这里得到的：

这就是我所做的：

小提琴

.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 值，从顶部栏中删除左边距，而是在顶部栏内容上放置一个左边距，与左侧栏的宽度相同.听起来令人困惑但可能。

原文由 TheCarver 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
}

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

原文由 Mario 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

小提琴

原文由 Danield 发布，翻译遵循 CC BY-SA 3.0 许可协议