Адаптивный футер страницы приклеенный к низу окна браузера
Небольшой фрагмент кода (сниппет) css, с помощью которого, можно очень просто и надёжно «прибить», прижать (приклеить, sticky) футер страницы к низу окна браузера. Один из многочисленных способов, плох он или хорош, можно узнать только в сравнении и при реальном использовании на действующих или тестовых проектах.
Посмотрите на реализацию данного вида приклеенного футера, протестируйте его работу в различных браузерах на своих тестовых площадках.
Попробуйте изменять размеры окна браузера, футер будет автоматом подстраиваться под выбранный вами размер.
CSS
#content { padding-bottom: 100px; } #footer { position: absolute; bottom: 0; background-color:slategrey; width:100%; height: 80px; color: #ccc; text-align: center; } |
С уважением, Андрей.
Удачи! Буду очень благодарен, если поделитесь ссылкой на запись в своих соц. сетях:
Приклеивает… Но #content не растягивает. Итог: короткая страница «Длинная» страница
Приклеивает, ещё как приклеивает)).
В селекторе
html, body {...}отключитеheight: 100%;и пропишитеposition: relative;, а вhtml { color: color: #000; }добавьтеheight: 100%;получится следующая картина:html, body {
font-family: Arial,Helvetica,sans-serif;
width: 100%;
/* height: 100%; */
margin: 0px;
padding: 0px;
font-size: 1em;
position: relative;
}
html {
color: #000;
height: 100%;
}
html, body {
font-family: Arial,Helvetica,sans-serif;
width: 100%;
/* height: 100%; */
margin: 0px;
padding: 0px;
font-size: 1em;
position: relative;
}
html {
color: #000;
height: 100%;
}
Пример не рабочий в том числе и на JSFiddle!
Как проверить:
1. Кликните по кнопке, чтобы отобразился текст.
2. Сожмите экран
3. Вытяните экран
4. Появится прокрутка, покрутите ее вверх вниз
5. Будет видно снизу белую полосу.