Примерная HTML структура:
1 2 3 4 5 6 7 8 9 |
<header> Шапка сайта </header> <div class="main-content"> Контент сайта </div> <footer class="footer-parallax"> Подвал </footer> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.main-content { box-shadow:0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); background:#FFF; } .footer-parallax { position:fixed; bottom:0; left:0; width:100%; z-index:-1; } @media screen and (max-width:767px) { .footer-parallax { position:static; } } |
Свойство background
обязательно для блока с контентом, иначе он не перекроет футер.
JS:
Скрипт написан для библиотеки jQuery
1 2 3 4 5 6 7 8 9 |
function margin() { if ($(window).width() > 767) { $(".main-content").css({'margin-bottom': $(".footer-parallax").height()}); } else { $(".main-content").css({'margin-bottom': 0}); } } $(margin); $(window).resize(margin); |
Если вы по какой-то причине не хотите использовать скрипты, то к стилям нужно добавить следующее:
1 2 3 4 5 6 |
.main-content { margin-bottom:200px; /* высота подвала */ } .footer-parallax { height:200px; /* высота подвала */ } |
Добавить комментарий: