расширить пустой div на длину страницы - PullRequest
Новая
       0

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

0 голосов
/ 17 ноября 2010

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

Ответы [ 3 ]

2 голосов
/ 17 ноября 2010

Посмотрите на фиксированное положение CSS. 

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

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

0 голосов
/ 19 ноября 2010 
<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. Они полностью лишены всего, кроме фоновых изображений, которые я хочу прокрутить по длине страницы.

0 голосов
/ 17 ноября 2010

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

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

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

...