Расширить пустой div на длину страницы

Question

У меня есть два div, установленные на 100 пикселей, абсолютно расположенные на левой и правой сторонах страницы. У меня есть раздел контента между ними. Я хочу, чтобы изображения прокручивались вместе со страницей при прокрутке сверху вниз на больших страницах. Всего на моем сайте семь страниц разного размера, и я пытаюсь использовать CSS, чтобы сделать эту работу. Может кто-нибудь мне помочь?

Answer 1

Посмотрите на CSS фиксированного позиционирования.

position:fixed; top:0px; left:0px;

Смотрите здесь: http://limpid.nl/lab/css/fixed/left-sidebar-and-right-sidebar

Answer 2

<div id="image1">
</div>

<div id="image2">
</div>

#image1 {
    position: absolute;
    width: 100px;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    background-image: url(../media/warlock.jpg);
    min-height: 100%;
    height: 100%;
    background-position: center;
    background-attachment: scroll;
}

#image2 {
    position: absolute;
    width: 100px;
    top: 0px;
    right: 0px;
    padding: 0;
    background-image: url(../media/paladin.jpg);
    min-height: 100%;
    height: 100%;
    background-position: center;
    background-attachment: scroll;
    background-repeat: repeat;
}

Это в основном код для двух сторонних div. Они полностью лишены всего, кроме фоновых изображений, которые я хочу прокрутить по длине страницы.

Answer 3

Вот пример, который может решить вашу проблему.

Используется background-attachment: исправлено; но вы также можете использовать position:fixed attibute в зависимости от того, как вы хотите, чтобы ваши изображения были статичными в элементе или прокручивались со страницей. Проблема с опцией background - это то, что вам потребуется создать фоновое изображение для него, но это будет работать.

РЕДАКТИРОВАТЬ: Вот отличная статья о фиксированном позиционировании и совместимости браузера