Убедитесь, что HTML-div находится в нижней части экрана.

Question

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

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

--------------------------------------- 
|  |     |   | 
|  |     |   | 
|  | Content  |   | 
|  |     |   | 
|  |__________________|   | 
| ugly bg  |     | 
| stripe ----> |     | 
|________________|____________________| 

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

Мое фоновое положение настроено на центральное повторение-y, поэтому я не могу его компенсировать на 1/2 фиксированной ширины моего div.

В основном мне нужно выяснить, как растянуть мой контент на дно, или способ сместить мой фон до конца моего содержимого.

Любые идеи?

Answer 1

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

Статья о faux columns на A List Apart имеет аналогичный трюк.