Положение фиксированная ширина 100%

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

3 57
html css

3 ответа:

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

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

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

100

вместо 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:
}

скрипка

6

попробуй такое

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

-1