位置固定宽度100%

Question

我有一个position:fixed250px宽的左列,高度为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值,从顶部条移除左边距,而是在顶部条内容上放置左边距,与左列的宽度相同.听起来令人困惑,但可能.

Answer 1

非常简单的解决方案,不需要最新的CSS版本根本没有设置width.而只是设置right: 0,这将强制顶部栏的右边界坐在右边界,如在这个小提琴中可以看到.

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

小提琴