Как привязать футер к низу страницы?

Если страница короткая, то содержимое будет вверху, а футер внизу, как и полагается. Если страница длинная (больше одного экрана, то содержимое “оттолкнет” футер вниз и страница будет прокручиваться.

Где будет работать?

Во всех браузерах будет, даже в вашем любимом :-). Только не забываем объявлять документ как xhtml transitional.

Что делать?
1. В body должно быть всего 2 дива – большой див .height100 и див подвала .footer

<body>

<div class="height100">

...

</div>

<div class="footer">

...

</div>

</body>

Обратите внимание на то, что футер ни в коем случае не должен быть внутри большого дива.

2. В большом диве .height100 содержиться все, кроме подвала. Это ваш новый body. Там могут быть хедеры, контенты и вообще все, что угодно.

3. В таблице стилей мы должны прописать следующее:

body, html {

height:100%;

}

.height100 {

min-height:100%;

_height:100%; // это хак для вашего любимого браузера

}

.footer {

height:40px;

width:100%; // ширину задали, потому что абсолютно позиционируемый блок

position:absolute;

margin-top:-40px; // смещаем вверх с помощью margin ровно на высоту футера

z-index:20; // позицию слоя задали, чтобы был точно выше большого дива

}

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

Интересует профессиональная разработка сайтов? В таком случае настоятельно рекомендуем Вам обратиться ща помощью к специалистам компании, официальный сайт которой расположен по ссылке kesso.cz. Профессионалы своего дела будут рады помочь вам!

User

  • Доска объявлений AdsManager 2913 для Joomla 2.5/3.0

    Кирил Кирил 18.08.2014 06:37
    http://joomlaru.com/mod/ja-social-locker.html

    Подробнее...

     
  • Доска объявлений AdsManager 2913 для Joomla 2.5/3.0

    Andrey Andrey 17.08.2014 20:07
    Admin как Вы реализовали социальный замок на ссылках для скачивания?

    Подробнее...

     
  • Модуль SP Virtuemart Product Slider для Joomla 2.5

    Руслег Руслег 25.07.2014 14:24
    В упор не могу понять, как в Модуль SP Virtuemart Product Slider для Joomla 2.5 настаивать таймер ...

    Подробнее...

Копирование материалов сайта без прямой обратной ссылки на первоисточник запрещено.