2013-07-10 3 views
1

Я не уверен, если это возможно или нет:Вы можете создать DIV, не прокручивать, как содержание страницы

У меня есть веб-страницы с несколькими Див х контента на нем, уложены один на другой , Внизу, из всех содержимого div, я хочу, чтобы изображение было 100px (или, возможно, это DIV с background-image).

Когда вы просматриваете эту страницу, браузер создает полосы прокрутки, чтобы вы могли прокручивать вниз содержимое, а также чтобы вы могли прокручивать нижний div/изображение в поле зрения.

Есть ли настройки CSS, которые я могу использовать на этом нижнем div/изображении, чтобы браузер в основном игнорировал его как контент? Чтобы браузер не пытался прокручивать его? Я не могу понять, возможно ли это или нет.

В качестве альтернативы, я могу сделать изображение частью фона <body>, но как же заставить это изображение отображаться точно под моим содержимым div? Когда вы меняете размер окна, высота моего содержимого div изменяется из-за изменения содержимого внутри них. Поэтому я не уверен, как вы всегда можете обеспечить, чтобы это нижнее изображение отображалось именно после последнего содержимого div, если это фон.

UPDATE

Вот ссылка, которая может помочь проиллюстрировать то, что я пытаюсь сделать: http://jsbin.com/ojejad/2/edit

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

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

+0

возможно дубликат [Как же сделать Div следить, как вы прокручивать?] (Http://stackoverflow.com/questions/11399537/how-do-you-make- a-div-follow-as-you-scroll) –

+0

Кажется, что вам нужен элемент из потока документов. Вы можете сделать его псевдоэлементом или дать ему фиксированное позиционирование. Не могли бы вы предоставить код/​​сопроводительные изображения/демо? –

ответ

4

Если вы хотите что-то прилипает к использованию экрана

position:fixed; 

Как так:

div { 
    background-color:blue; 
    height:200px; 
    width:200px; 
    position:fixed; 
    bottom:0; 
} 

Демо: http://jsbin.com/owacaq/1/edit

Edit:

Если вы хотите что-то придерживаться его родительскому использованию

position:absolute; 

На тыкаться элемент и

position:relative; 

На родителя.

Позиция абсолютная не уважает ничего, кроме следующего родителя с положением, отличным от статического.

Пример

http://jsbin.com/eceqeh/1/edit

+0

Как исправить его в нижней части div, чтобы изменить высоту, когда я изменяю размер браузера? –

+0

Если вы хотите, чтобы это зафиксировано на div, а не на позиции использования экрана: absolute; и положение: относительное; на родительском элементе, против которого вы хотите разместить его. – user1721135

+0

см. Это http://jsbin.com/eceqeh/1/edit измените размер вашего браузера, он будет всегда у основания синего div – user1721135