CSS Несколько Divs установлены на 100% Высота

Question

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

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

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

Мой вопрос, как я могу дополнительно получить мой DIV # rightContent растягивать точно так же?

У меня есть мои HTML, тело и контейнер высот все специфические при 100 %, а также еще один контейнерный div, называемый #content. Я довольно запутан.

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

Answer 1

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

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

Answer 2

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

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

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