Как центрировать фиксированный div внутри другого div?

0

У меня есть один главный div, который должен сделать страницу прокручиваемой. По обе стороны этого div есть боковая панель. Единственная разница, которую я хочу от того, как это происходит сейчас, заключается в том, что боковые панели должны всегда оставаться на вершине (position: fixed;)

Я пробовал все, но это не работает. Если я поставил position: fixed; на .fixed, ширина больше не 100%, а ширина фактического содержимого внутри. Если я накладываю на width: 100% ширина становится 100% от области просмотра.

Это возможно даже с помощью CSS?

JSFiddle: http://jsfiddle.net/6yWNv/

Боковая панель 1 
<div id="wrapper">
    <div class="contents">
        <p>Lorem ipsum dolor sit amnet.</p>
    </div>
</div>
<div class="sidebar">
    <div class="contents">
        <div class="fixed">
            Sidebar 2
        </div>
    </div>
</div>

padding: 0;}

#wrapper {
    width: 54%;
    float: left;
    background: #0FF;
}

.sidebar {
    width: 23%;
    float: left;
}
.sidebar .contents {
    margin: auto;
    background: #F00;
    min-width: 100px;
    width: 55%;
    height: 100px;
}

.sidebar .contents .fixed {
    background: #0F0;
}
  • 0
    Вы не можете иметь что-то плавающее и исправленное одновременно
  • 0
    Это то, что вы хотите jsfiddle.net/j08691/6yWNv/2 ?
Показать ещё 4 комментария
Теги:

3 ответа

2
Лучший ответ

Невозможно использовать только CSS. Когда вы fixed элемент, он удаляет его из своего "контекста" и создает новый "контекст" документа. Вот почему указание width: 100% в position: fixed элемент охватывает страницу.

Редактирование: я предполагаю, что вы хотите, чтобы зеленые боковые панели оставались на месте, но красные ящики уходили, когда вы прокручиваете (я делаю это предположение из-за того, как вы назвали ваши классы на своей странице).

Поделиться
3

Фокус в том, чтобы установить position:fixed на боковой панели (left:0 и right:0 соответственно), а затем добавить margin-left:23% в #wrapper:

#wrapper {
    width: 54%;
    margin-left: 23%;
    background: #0FF;
}

.sidebar {
    width: 23%;
    position: fixed;
    left:0; top: 0;
}

#wrapper + .sidebar {  /* target second sidebar */
    left: inherit;     /* reset left */
    right:0;
}

если вы хотите, чтобы зеленые боковые панели оставались на месте, но красные ящики, чтобы отойти, тогда что-то вроде этого должно работать:

.sidebar {
    width: 23%;
    float: left;
    position: relative;   /* so sub-containers are relative to sidebar */
}
.sidebar .contents {
    margin: auto;
    background: #F00;
    min-width: 100px;
    width: 100%;          /* relative to sidebar */
    height: 100px;
}

.sidebar .contents .fixed {
    background: #0F0;
    position: fixed;      /*  starts a new context... */
    width: 23%;           /*  so this is not relative to sidebar *.
}
Поделиться
1

вам нужно исправить sidebar, а не ее содержимое.

Просто удалите float и установите фиксированное положение сверху и справа

  .sidebar {
        width: 30%;
        position: fixed;
        top:0;
        right:0;
    }
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню