Страница на всю высоту с "прижатым" к низу подвалом

Post 1

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

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

 Для начала работы создадим основу нашего сайта:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Прижатый footer</title>
</head>
<body>

<div class="wrap">
    <div class="container"></div>
    <footer></footer>
</div>

</body>
</html>

Div с классом .wrap будет растянут на всю высоту экрана с помощью свойста height=100%. Блок с классом .container будет иметь минимальную высоту экрана (min-height=100%), и иметь отступ снизу равный высоте подвала. Это делается для того, чтобы подвал мог "занять" отступ  div  class="container" .  Подвалу, для примера, дадим 300px.

Теперь давайте преобразуем это в стили:

<style>
    * {
        box-sizing: border-box;
    }
    body,html, .wrap {
        height: 100%;
        margin: 0;
    }
    .container {
        min-height: 100%;
        padding-bottom: 300px;
    }
    footer {
        margin-top: -300px;
        height: 300px;
    }
</style>

Важно сказать, что мы должны использовать свойство для всех элементов - "box-sizing: border-box;", без этого данный метод не будет работать. Свойство позволяет включать padding и border в указанную высоту и ширину блока. Также важно установить свойство для body и html - height: 100%, ведь высота в процентах расчитывается в зависимости от высоты родителя блока, кем и является body и html для блока с классом .wrap.

Footer, в свою очередь, поднимаем ровно на высоту своего блока свойством  margin-top: -300px;, подвал занимает нижний отступ блока с классом .container.

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

На этом все. Творите!

 

Вернуться

Категории