Footer внизу страницы

Сегодня мы рассмотрим довольно полезный урок, который позволит научиться закреплять футер в самом низу экрана. Давайте рассмотрим пример.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Footer всегда внизу</title>

    <style type="text/css">
      html, body {height: 100%; margin: 0px; padding: 0px; text-align: center;}
      .page {min-height: 100%; height: auto !important; background: #cccccc;}
      .wrap {padding-bottom: 175px;}
      .footer {height: 175px; margin-top: -175px; background: #c3c3c3;}
    </style>
  </head>  
  <body>   
    <div class="page">
      <div class="wrap">Контентная часть сайта</div>
    </div>
    <div class="footer">Футер, располагающийся внизу</div>
  </body>
</html>

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

<div class="page">
  <div class="wrap">Контентная часть сайта</div>
</div>
<div class="footer">Футер, располагающийся внизу</div>

Такое расположение div'ов нужно для того, чтобы футер не заезжал на основной контент.

<span class="token selector">html, body </span><span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span><span class="token punctuation">}</span>

Данный код говорит браузеру, что видимую область надо растягивать на всю высоту окна.

<span class="token selector"><span class="token class">.page</span> </span><span class="token punctuation">{</span><span class="token property">min-height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> auto <span class="token important">!important</span><span class="token punctuation">;</span><span class="token punctuation">}</span>

.page: данный класс уведомляет браузеров о том, что контентная часть у нас занимает все доступные 100% (доступные – это не означается, что от края до края, тут футер не учитывается)

<span class="token selector"><span class="token class">.wrap</span> </span><span class="token punctuation">{</span><span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token number">175</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span>

.wrap: здесь мы задаем отступ от нижнего края экрана, равным высоте нашего футера. А наш футер равен 175px

<span class="token selector"><span class="token class">.footer</span> </span><span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">175</span>px<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> -<span class="token number">175</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span>

.footer:

height: 175px – задаем высоту нашего футера.
margin-top: -175px; – делаем отрицательный отступ от края браузера равным высоте нашего футера. Это нужно для того, чтобы при наличии малого количества контента на странице у нас не появлялась полоса прокрутки.

Ну вот и все, теперь вы без труда сможете прижать футер к экрану, тем самым улучшив дизайн сайта.

24.02.2014 html admin 3369 0