位置固定宽度100％

我有一个position:fixed在250px宽100％的高度的左列，我试图把一个固定的，stream畅的横条放在左边的列的顶部，就像这个例子：

但这是我在这里得到的：

这是我所做的：

的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％的屏幕宽度，而不会溢出。 我希望这是一个简单的解决scheme，因为我刚刚花了几年的时间来构build一个相当复杂的响应模板，刚刚注意到，添加内容后，我顶栏右侧的东西正在屏幕上消失！

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

Answer 1

非常简单的解决scheme，不需要最新的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: } 

小提琴

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/