Позиция Фиксированная ширина 100%

У меня есть левый столбец position:fixed с шириной 250 пикселей и высотой 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-индекса, чем верхняя строка, удалите левый край из верхнего бара, а вместо этого поместите левое поле в верхнее содержимое панели, то же, что и ширина левого столбца, Звучит путающе, но возможно.

Ответ 1

Очень простое решение, которое не потребует последней версии CSS, вовсе не устанавливает width. Вместо этого просто установите right: 0, что заставит правую границу верхней панели сидеть на правой границе, как это видно в этой скрипке.

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

Я добавил красную рамку, чтобы было легче увидеть, где заканчивается ящик.

Ответ 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:
}

FIDDLE

Ответ 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/