Позиционирование нижнего колонтитула с CSS и 960gs

Question

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

Требования: -Открыть нижнюю часть содержимого, если содержимое превышает вертикальный размер окна просмотра -Открыть снизу окна просмотра, если область просмотра превышает вертикальный размер содержимого.

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

Код: <div style="background-image:url(footer_bg.jpg); background-position:bottom; background-repeat:repeat-x; height:235px; width:100%; bottom:0px; position:absolute;"></div>

Моя главная цель состоит в том, чтобы иметь колонтитул с текстом и фон градиент (т.е. информация о компании, контактная информация.). Я хотел бы, чтобы фон нижнего колонтитула охватывал ширину страницы, но я не знаю, смогу ли я сделать это с помощью divs 960 gs.

EDIT: Я хотел бы сделать это со всеми CSS, без сценариев, если это возможно.
я нашел хороший код, чтобы получить CSS колонтитула по этой ссылке:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Основная проблема я испытываю сейчас в реализации, что с 960gs находится в CSS 960gs float:left;. Похоже, что это мешает моим сеткам вертикально расширять родителя <div>. Однако, если я удаляю float, 960gs, похоже, не работает.

Ниже приведена ссылка с удаленным поплавком. Столбец «a» равен grid_7 suffix_1, а столбец «b» должен быть grid_4 в том же container_12. Другими словами, они должны быть рядом друг с другом.

Answer 1

Посмотрите на CSS Sticky Footer. Это делается в чистом html/css без скриптов вообще. Существует объяснение того, как заставить его работать с 960gs по адресу signalkraft.com.

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

Answer 2

В CSS нет возможности «если/еще». Здесь используются языки сценариев.

Посмотрите JQuery. В JQuery, вы можете получить элемент с #ID колонтитула и сказать что-то вроде:

$('#footer').addClass('bottomView'); 

«bottomView» может сделать так, что элемент с ID колонтитула прилипает к нижней части окна просмотра. Затем, когда пользователь прокручивает, какой JQuery может контролировать, он может проверить, хочет ли он изменить класс на «bottomContent».

Тогда в вашем css просто используйте классы bottomView и bottomContent, которые помещают элемент, который вам нужен.

Удачи.