Как прижать футер к низу страницы с помощью CSS?

Автор: Илья Остапенко /

Доброе время суток, дорогие друзья! Давно я ничего не писал на тему уроков по CSS, поэтому в этом посту буду исправляться и хочу рассказать вам, как прижать футер к низу страницы? Очень часто встречаю на форумах подобный вопрос, а так же частенько мне задают его вконтакте. Футер прижимают к низу, когда на странице мало контента, иначе если его не прижать, то он будет отображаться сразу после его окончания.

Как прижать футер к низу страницы с помощью CSS?

Постараюсь описать все покороче. Могу сказать, что прижать футер к низу так же просто, как сделать фиксированный фон или горизонтальное меню. Для начала, я покажу вам код страницы, а потом, как обычно распишу основную фишку, то есть, что именно прижимает футер к низу.


 

Основным тут является параметр для тега body - height: auto !important;. Суть данного параметра заключается в том, что если контента на страничке будет больше 100%, тогда высота будет больше 100%. Все это необходимо для того, чтобы подвал не залезал на контент, так как позиционирование данного блока, выставлено абсолютном. Блок футера прижимается к низу за счет параметра bottom: 0;

Собственно говоря, вот и весь секрет, как прижать футер к низу страницы. Как видите, нет ничего сложного в этом CSS трюке. Надеюсь вы легко сможете повторить все это на своем сайте, но если остались вопросы, задавайте их в комментариях.

 

Комментарии к записи

Оставить комментарий

Это не спам.