Pozycja Stała szerokość 100%

Question

Mam position:fixed lewą kolumnę o szerokości 250 pikseli ze 100% wysokością i próbuję umieścić stały, płynny poziomy pasek u góry, ale po prawej stronie lewej kolumny, jak w tym przykładzie:

Ale to co mi się tutaj:

to co mam zrobić:

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

Jak mogę sprawić tym okresie stała górnym pasku 100% szerokości ekranu, bez przechodzenia. Mam nadzieję, że jest to prosta poprawka, ponieważ właśnie spędziłem lata budując dość złożony responsywny szablon i zauważyłem, po dodaniu treści, że rzeczy po prawej stronie mojego górnego paska zniknęły z ekranu!

Mam jeden pomysł, ale może nie być najbardziej idealny, więc najpierw interesuję się innymi sugestiami. Lewej ustalonej kolumnie można nadać wyższą wartość indeksu Z niż górny pasek, usunąć lewy margines z górnego paska, ale zamiast tego umieścić lewy margines na górnej zawartości paska, taki sam jak szerokość lewej kolumny . Brzmi myląco, ale możliwe.

Answer 1

Bardzo proste rozwiązanie, które nie będzie wymagało najnowsza wersja CSS nie jest ustawienie width w ogóle. Zamiast tego po prostu ustaw right: 0, co zmusi prawą krawędź górnego paska do usadowienia się na prawej krawędzi, jak widać w this fiddle.

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

Dodałem czerwoną obwódkę, dzięki czemu łatwiej zobaczyć, gdzie kończy się pudełko.

Answer 2

Zamiast left: 250px korzystanie padding-left:250px w połączeniu z 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

Spróbuj

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