Если страница имеет мало контента, то часто возникает проблема, когда футер не закреплен внизу, а находится где-то посередине страницы. Выглядит это следующим образом:
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<header> <h1>Шапка сайта</h1> </header> <div class="content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae impedit quisquam deserunt corporis distinctio reprehenderit perspiciatis harum rem enim dignissimos? Fugiat ut fugit ullam corrupti? Accusantium ducimus libero explicabo hic.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae impedit quisquam deserunt corporis distinctio reprehenderit perspiciatis harum rem enim dignissimos? Fugiat ut fugit ullam corrupti? Accusantium ducimus libero explicabo hic.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae impedit quisquam deserunt corporis distinctio reprehenderit perspiciatis harum rem enim dignissimos? Fugiat ut fugit ullam corrupti? Accusantium ducimus libero explicabo hic.</p> </div> <footer> <span>Футер</span> </footer> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
* { margin: 0; padding: 0; } body { background-color: #C9C9C9; } p { margin: 20px 0; } header { background-color: pink; padding: 20px 0; } footer { background-color: gray; padding: 20px 0; } |
Результат:
Для того, чтобы закрепить футер страницы внизу воспользуемся относительными единицами измерения — vh. С их помощью можно задать блоку высоту, равную высоте окна браузера. Для этого зададим блоку .content свойство min-height: calc(100vh - 130px), где 100vh — полная высота окна браузера, 130px — высота шапки и футера (узнать можно с помощью режима разработчика в браузере. Для Chrome — f12). В итоге для блоку .content буде присвоена минимальная высота, равная разности высоты окна браузера и суммы высот шапки и футера.
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
* { margin: 0; padding: 0; } body { background-color: #C9C9C9; } p { margin: 20px 0; } header { background-color: pink; padding: 20px 0; } footer { background-color: gray; padding: 20px 0; } .content { min-height: calc(100vh - 130px); } |
Результат