Posizione larghezza fissa 100%

Question

Ho una colonna sinistra a 250 px con altezza pari al 100% e sto cercando di posizionare una barra orizzontale fissa e fluida nella parte superiore ma a destra della colonna sinistra, come nell'esempio seguente:

Ma questo è quello che sto ottenendo qui:

questo è quello che ho fatto:

0.123.516,410617 millions

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

Come posso fare questo lasso top barra fissa al 100% la larghezza dello schermo, senza fuoriuscita. Spero che questa sia una soluzione semplice, poiché ho appena trascorso anni costruendo un modello reattivo abbastanza complesso e ho appena notato, dopo aver aggiunto il contenuto, che le cose nella parte destra della mia barra in alto stavano scomparendo dallo schermo!

Ho un'idea ma potrebbe non essere la più ideale, quindi interessarsi prima ad altri suggerimenti. La colonna fissa di sinistra poteva avere un valore di indice z più alto rispetto alla barra in alto, rimuovere il margine sinistro dalla barra in alto, ma invece mettere un margine sinistro sul contenuto della barra in alto, lo stesso della larghezza della colonna di sinistra . Sembra confuso ma possibile.

Answer 1

soluzione molto semplice che non richiede l'ultima versione di CSS non è la creazione width a tutti. Invece basta impostare right: 0, che costringerà il bordo destro della barra in alto a sedersi sul bordo destro come si può vedere in this fiddle.

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

Ho aggiunto un bordo rosso in modo che sia più facile vedere dove finisce la scatola.

Answer 2

Invece di usare left: 250px utilizzo padding-left:250px in congiunzione con 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: 
} 

FIDDLE

Answer 3

Prova questo

.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/