CSS Multiple Divs установлен на 100% высоты

Question

Я понимаю, что этот вопрос является излишним, но мне не удалось найти ответ по результатам моих поисков здесь и на других онлайн-форумах. Вот моя ситуация.

http://www.ci.fayetteville.nc.us/CityCommon/port/contact.html

На этой странице у меня есть разделительная строка, которая должна доходить до нижней части страницы. Теперь я добавил много тегов разрыва, чтобы растянуть страницу. Это показывает, что фоновое изображение (используемое в качестве изображений нижнего колонтитула) растягивается до нижней части страницы. (Это изображение содержится в div # content.

Мой вопрос: как я могу дополнительно заставить мой div # rightContent растягиваться таким же образом?

У меня есть html, body и container, все на 100%, а также другой контейнер div, называемый #content. Я довольно тупой.

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

Answer 1

Существуют различные хаки CSS для получения одинаковой высоты столбцов. Единственное (IMHO), которое кажется «стандартным» - это использовать display: table, но это не работает в IE (конечно), поэтому делает его менее идеальным.

Таким образом, я считаю, что лучшим решением будет немного JavaScript. Вы уже используете jQuery, так что это будет еще проще. Вот один пример решения:

http://www.cssnewbie.com/equal-height-columns-with-jquery/

Answer 2

Создайте одно фоновое изображение, которое содержит как внешние границы, так и разделитель в правой колонке.Этот метод называется «искусственными колоннами».

См .: http://www.alistapart.com/articles/fauxcolumns/ и http://en.wikipedia.org/wiki/Faux_columns