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

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


css xhtml-1.0-strict
person Robert Frey    schedule 16.11.2010    source источник
comment
Вы говорите, что хотите, чтобы изображения оставались на месте и не двигались? Кроме того, не могли бы вы поделиться под вопросом CSS вместе с базовой страницей, показывающей проблему, которую вы пытаетесь решить? ~~ stackoverflow.com/questions/how-to-ask   -  person jcolebrand    schedule 17.11.2010

Ответы (3)


arrow_upward
2
arrow_downward

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

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

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

person superUntitled    schedule 16.11.2010
comment
Следует отметить, что position:fixed не поддерживается в IE6 и не работает для мобильных устройств, таких как iPhone (на случай, если эти вещи вызывают беспокойство). - person RussellUresti; 17.11.2010
comment
Спасибо, по предоставленной ссылке есть лучший способ работы с ручными устройствами и тому подобным. - person superUntitled; 17.11.2010

arrow_upward
0
arrow_downward

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

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

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

person JonVD    schedule 16.11.2010
comment
у меня есть они в div, я установил фиксированные свойства, но я расположил div с position: absolute; атрибут. Мне нужно, чтобы внешние элементы div соответствовали высоте элемента содержимого, а затем фоновые изображения прокручивались вместе со страницей в зависимости от длины страницы. - person Robert Frey; 18.11.2010
comment
Я вижу вашу проблему, такие вещи могут быть немного неприятными. Если бы вы могли опубликовать упрощенную версию своих div и css, это очень помогло бы в предоставлении решения =) Тем временем я прочитал отличный пост именно по этой проблеме и добавил его в раздел «Правка» моего ответа. - person JonVD; 18.11.2010

arrow_upward
0
arrow_downward 

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

person Robert    schedule 19.11.2010