位置固定幅100％

Question

左の列は250ピクセル幅で100％の高さです。この例のように、左端の右端に固定された流体の水平バーを配置しようとしています。

しかし、これは私がここにきてるものです：

これは私がやっていることです：

私は、これは画面の幅が出てこぼさず、トップバースパン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; 
} 

。私はちょうど複雑なレスポンシブなテンプレートを作成し、コンテンツを追加した後、トップバーの右側にあるものが画面から消えていたことを気づいたので、これは簡単な修正ですと期待しています！

私は1つのアイデアを持っていますが、最も理想的ではないかもしれないので、最初に他の提案に興味があります。左の固定列には、上の棒よりも高いz-インデックス値を与え、上の棒から左のマージンを取り除きますが、代わりに上の棒の内容に左の余白を入れます。これは左の列の幅と同じです。混乱する可能性がありますが、可能です。代わりにbox-sizing: border-boxで接続詞でleft: 250px使用padding-left:250pxを使用しての

Answer 1

非常に簡単な解決策は全くwidthを設定されていません。代わりに、this fiddleに示すように、上部のバーの右端を右端に置くようにすると、right: 0に設定されます。

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

赤い枠線が追加されているため、ボックスの終わりを確認するのが簡単です。

Answer 2

：最新のCSSのバージョンを必要としません

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

FIDDLE

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/