Можно ли использовать прокрутку веб-браузера для отображения элементов фиксированной позиции CSS, которые находятся за пределами области просмотра веб-браузера?

Question

Я пытаюсь создать макет CSS, где страница выглядит так, как будто она находится посреди леса. Есть левый и правый div с фоновыми деревьями, некоторые div-заголовки, которые показывают верхнюю часть страницы с различными дикими животными, и некоторые div-колонтитулы, которые показывают нижний край с большим количеством диких животных, которые соответствуют левому и правому фоновым изображениям div, все из которых позиционируется с использованием «position: fixed» в CSS.

Тогда в середине есть содержимое, которое расположено нормально и прокручивается. Это все отлично работает.

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

Я попытался установить переполнение: scroll и height: 768 для элементов .body и .html в таблице стилей, но безуспешно.

Обратите внимание, что я позиционирую все значения top: и left: в CSS. Я знаю, что могу обойти это, используя bottom: и right: но проблема в том, что изображения нижнего колонтитула не будут выстраиваться.

Это может быть просто невозможно, и в этом случае мне придется переделать графический дизайн, но если это возможно, я бы хотел узнать как!

Answer 1

конечно, некоторые окна веб-браузера могут быть не такими большими

Или действительно такой маленький! Вероятность того, что окно браузера на самом деле будет точного размера для размещения ваших украшений по краям, довольно мала; Это всегда проблема с фиксированным макетом.

Я знаю, что могу обойти это, используя bottom: и right: но проблема в том, что изображения нижнего колонтитула не будут выстраиваться.

Да, разработка изображений, которые могут изменять их объединения в ответ на изменения размера страницы, - это больше работы, но она выполнима. Вам придется экспортировать слой «птица + листва» и слой «белка + листва» в виде отдельных прозрачных изображений, а затем наложить их поверх более длинного бокового изображения.

Чтобы сделать края объекта красивыми и гладкими, потребуется 8-битная прозрачность PNG, что потребует взлома рендеринга PNG для IE6. Но не конец света.

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

Это проблема? Они носят исключительно декоративный характер.

Я пытался установить переполнение: scroll и height: 768 для элементов .body и .html

Для этого подхода вам нужно установить ‘overflow: auto; height: 768px; ’на оболочке

, которая содержит как # sidebar-left, так и # контент.

Answer 2

У вас может быть две картинки: 1) справа, которая содержит правые деревья и изображение нижнего колонтитула, и 2) и левое изображение с левыми деревьями. Сделайте нижний колонтитул намного шире, чем нужно, а деревья (слева и справа) намного выше, чем нужно.

Затем установите правое изображение снизу: и вправо: и установите левое изображение снизу: слева :. Это заставит изображения всегда быть на внешней стороне страницы, независимо от размера браузера. Затем установите z-индекс правой картинки, чтобы она находилась сразу за левой картинкой. Тогда он всегда будет выглядеть так, как будто страница будет ограничена. Или вы можете установить фиксированную ширину и высоту родительского контейнера, и они всегда будут на границе контейнера. Вы также можете установить минимальную ширину и высоту, если вам нужны определенные минимальные размеры.

Что касается вещей, которые не видны в определенном разрешении, вы действительно не собираетесь обойти это. Вы можете иметь два набора изображений, один для нормального разрешения, а другой для меньшего разрешения. Затем вы можете получить ширину и высоту браузера с помощью $(window).height() и $(window).width() с помощью jQuery и загрузить соответствующие изображения.

РЕДАКТИРОВАТЬ: После просмотра вашего сайта я почти уверен, что вторая часть этого (установка фиксированной ширины для контейнера, затем добавление нижнего правого изображения и нижнего левого изображения) будет работать так, как вы хотите. Это заставит страницу иметь определенную ширину, и, таким образом, будет видна вся граница.