Данный способ использует z-index, поэтому в старых версиях Internet Explorer работать не будет. Но думаю это не страшно, потому как со старыми версиям остались единицы.
Ну что же приступим.
1. HTML разметка
По примеру ниже видно что у нас будет два основных блока, это блок с контентом и подвал. Подвал находится отдельно, и не является внутренним блоком контента.
<div id="main"> Сюда контент </div> <footer> Сюда содержимое подвала </footer>
2. CSS разметка
Далее прописываем стили для блока контента и подвала. Главным свойством в данных стилях есть как раз z-index. В моем примере у блока с контентом значение z-index равно 1, а в подвала -2. Можете менять, подстраивая под свои нужды, но главное Вам нужно обязательно помнить о том, что у подвала значение должно всегда быть ниже чем у основного контента. Также Вы должны указать отступ он нижней границы контента. Как видно в стилях ниже, он сейчас установлен 600 пикселей.
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 Arial, sans-serif;
color: #333;
}
#main{
position:relative;
z-index:1;
background-color: #f8f8f8;
padding: 120px 0 600px;
box-shadow: 0 3px 3px rgba(0,0,0,0.2);}
footer{
height: 245px;
color:#ccc;
font-size:12px;
position:relative;
z-index:-2;
background-color:#31353a;
display: block;
}
В стилях и разметке я прописал лишь основное, без блоков наполнения как в примере Выше, но думаю Вам не сложно будет это сделать, к тому же Ваш контент 100% отличается от приведенного в пример мной 🙂
Экспериментируйте и вносите свои дополнения, главное не бойтесь. Если Все сделано правильно, результат Вашей работы должен быть такой же как и в примере в начале статьи.
Я очень надеюсь на то, что Вам поможет этот урок и Вы сделаете свой подвал не обычным.
На этом все, спасибо за внимание 🙂
