CSS: фоновое изображение не заполняется при прокрутке - PullRequest
0 голосов
/ 04 декабря 2011

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

Вот сайтЯ работаю над (все еще в стадии разработки): http://student.plattsburgh.edu/stipl001/index.html.

Проблема лучше всего просматривается при просмотре этой страницы в небольшом окне: http://student.plattsburgh.edu/stipl001/resume.html.

Я прочитал много,многие посты на разных сайтах пытаются это выяснить (включая этот: CSS: фоновое изображение не заполняется при прокрутке ), но мне не повезло.Я попытался установить все различные свойства для фона в CSS, которые я мог придумать, включая некоторые из более новых.Затем я экспериментировал со свойством overflow, но оно просто скрывает весь мой текст или создает странную полосу прокрутки, которая заставляет мой текст прокручиваться вверх по заголовку.Я также пытался переместить фон моей страницы из тела в html и фон контейнера из контейнера в тело, но это ничего не изменило, поэтому я, должно быть, что-то делаю не так (возможно, тот факт, что у меня есть два фоновых изображения для работы?).

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

Большое вам спасибо!

1 Ответ

0 голосов
/ 05 декабря 2011

просто измените min-height: 100% на min-height: 1092px (высота изображения), и все будет в порядке ...

РЕДАКТИРОВАТЬ:

предыдущий ответ былслишком быстро, после второго просмотра кода я заметил, что ошибка вызвана плавающими столбцами: если вы плаваете элемент, элемент контейнера не будет наследовать высоту плавающего элемента - поэтому высота была установлена ​​на100% исходного окна и не расширяется, если столбец содержимого становится длиннее.Это можно исправить, добавив дополнительный элемент в #container, после #rightcolumn, с clear: обоими на нем - это заставит родительский элемент принять высоту его содержимого.

См. http://jsfiddle.net/uS7Ba/1/ для упрощенного примера, включая улучшенный фиксированный нижний колонтитул.

Надеюсь, это поможет ...

...