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

Я новичок в создании макетов с помощью 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>

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

РЕДАКТИРОВАТЬ: Я хотел бы сделать это с помощью всего CSS, по возможности без скриптов.
Я нашел хороший код для получения нижнего колонтитула CSS по этой ссылке:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

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

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


person Nick    schedule 11.05.2010    source источник


Ответы (2)



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

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

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

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

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

Удачи.

person DexterW    schedule 11.05.2010
comment
Я хотел бы попытаться избежать сценариев. Если возможно, я хочу сделать это со всеми CSS. Добавлю комментарий к исходному вопросу для уточнения. - person Nick; 15.05.2010