Создание нижнего колонтитула в нижней части страницы без лишней разметки - PullRequest
3 голосов
/ 30 июня 2010

Если бы вам пришлось беспокоиться только о браузерах Firefox и Webkit, какой CSS вы бы использовали, чтобы нижний колонтитул в следующем HTML-коде прилипал к нижней части страницы? Примечание: Я не хочу добавлять разметку на страницу.

<html>
    <body>
        <header>...</header>
        <article>...</article>
        <aside>...</aside>
        <footer>...</footer>
    </body>
</html>

Ответы [ 3 ]

6 голосов
/ 30 июня 2010

Просто установите фиксированное положение и установите нижнее значение 0:

footer
{
   position:fixed;
   bottom:0;
}

Для меня работает угощение в FF, IE7, IE8 и т. Д.Вот мой фактический CSS на одном из моих сайтов для нижнего колонтитула (div с идентификатором footer):

#footer
{
 clear:both;
 color:#FFF;
 background:#666;
 bottom:0;
 border:solid 1px #333;
 height:30px;
 width:100%;
 min-width:950px;
 position:fixed;
 z-index:100;
}
1 голос
/ 30 июня 2010

Попробуйте использовать position:fixed

Вы можете сделать что-то вроде:

footer { position:fixed; bottom:0; }

Стоит отметить, что, поскольку вы используете тег <footer>, вы не должны ставить # перед «нижним колонтитулом» в CSS, поскольку использование #footer ссылается на элемент с идентификатором «нижний колонтитул» , а не сам элемент нижнего колонтитула

0 голосов
/ 01 июля 2010

div#footer { position:fixed; bottom:0; } путь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...