Прижать футер к низу страницы
Доброго времени суток, вопрос заезженный. В гугле есть информация , но во всех примерах нужно оборачивать ненужным div блоком. подскажите пожалуйста можно ли обойтись без него. Например есть вот такая вот структура
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt sequi
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
можно ли как то сдесь прижать футер, не оборачивая его ? в див лишний, спасибо
Отслеживать
3,179 21 21 серебряный знак 44 44 бронзовых знака
задан 30 мар 2016 в 19:06
Дмитрий Бережной Дмитрий Бережной
133 9 9 бронзовых знаков
ответ есть тут ru.stackoverflow.com/questions/33753/…
30 мар 2016 в 19:08
там обертывают wrapper , основной контент, а в моем вопросе следующее можно ли оставить так чтобы не Обертывать в лишний div
30 мар 2016 в 19:10
а в чем собственно проблема? Это 1 див. 1. При генерации дерева на реакте, целостной страницы, их может быть от 5к и более. И странице это не особо мешает. Так что экономить на таких вещах, совсем не обязательно. А по теме: примеров в интернете куча, используйте любой.
Как опустить футер вниз css
Как прижать футер к низу страницы? Этот вопросом задаются многие, кто сталкивался с версткой макетов для сайта. Дело в том, что если высота блоков в этих макетах не указана явно, то она зависит от количества их содержимого, соответственно, если этого содержимого достаточно мало, то весь макет может занимать высоту меньше чем окно браузера. Естественно выглядит все это не очень красиво. Сейчас я покажу вам несколько способов, которые позволят прижать футер к нижней части страницы и таким образом сделать макет более привлекательным и привычным.
- Все блоки макета были заключены в дополнительный блок-обертку , которому задали минимальную высоту (свойство CSS min-height) равную 100%, чтобы он растянулся во всю высоту окна браузера, но если потребуется, то мог тянуться и дальше. Однако так как процентные значения считаются относительно предка, то чтобы все сработало, пришлось явно указать высоту (CSS height) для тегов и .
- Следующим шагом стало абсолютное позиционирование (CSS position) футера относительно оберточного блока к его нижней стороне (CSS bottom). Таким образом, футер у нас оказался прижат к нижней части страницы.
- Так как абсолютное позиционирование вырывает элемент из потока, то при добавлении информации в блоки с контентом и меню, часть ее будет уходить под прижатый футер. Чтобы этого не произошло, элементам и были установлены нижние внутренние отступы (CSS padding) равные высоте футера. Теперь именно они будут уходить под футер и толкать его вниз.
- Так как у нас в макете блок с меню является плавающим (CSS float), то футер все равно его не будет замечать, а, соответственно, меню не будет толкать его вниз. Для исправления этого был создан еще один блок ( ), который прерывает обтекание (свойство CSS clear). Кстати, если вы не планируете осуществлять поддержку IE6 и IE7, то можете вместо этого блока применить к последнему блоку перед футером (здесь это «content» ) псевдоэлемент :after и просто у него сделать прерывание обтекания.
- Все блоки макета кроме футера были обернуты в дополнительный блок , которому была задана минимальная высота (CSS min-height) в 100%. Это было сделано для того, чтобы блок-обертка как минимум вытянулся во всю высоту окна браузера, но при необходимости (если содержимого будет много) мог тянуться и дальше. Теперь высота нашей обертки стала равна высоте окна браузера, а высота всей HTML-страницы = высота обертки + высота футера.
- В результате действий первого пункта наш футер хоть и прижался к низу страницы, но ушел за нижнюю границу окна браузера, что не хорошо. Чтобы поднять его в зону видимости, для него было задано верхнее отрицательное поле (CSS margin-top) размер которого равен высоте самого футера. Все, футер прижат и находится внизу страницы.
- Так как в предыдущем пункте у прижатого футера мы указали верхнее отрицательное поле, то при добавлении информации в блоки с контентом или меню, часть ее будет уходить под этот футер. Чтобы этого избежать был создан еще один блок с , высота которого равна (можно сделать даже чуть больше) высоте футера. Таким образом, именно этот корректирующий блок будет уходить под прижатый футер и толкать его вниз, предотвращая скрытие информации.
- Корректирующему блоку было добавлено прерывание обтекания (CSS clear), чтобы он не обтек меню, если оно будет превышать высоту контента. Соответственно у самого футера это прерывание обтекания было убрано за ненадобностью.
Как опустить текст вниз?
Делаю не большое меню, не могу понять как опустить этот текст(asd) вниз. Чтобы он был под.
Sticky footers
Шаблон нижнего колонтитула — это шаблон, в котором нижний колонтитул вашей страницы «прилипает» к нижней части области просмотра в тех случаях, когда содержимое короче высоты области просмотра. В этом рецепте мы рассмотрим несколько методов для создания одного из них.
Как прижать footer к низу экрана?
Есть основной блок
.container
header content Отслеживать
7,291 5 5 золотых знаков 27 27 серебряных знаков 69 69 бронзовых знаков
задан 20 июл 2016 в 7:47
737 1 1 золотой знак 6 6 серебряных знаков 10 10 бронзовых знаков
Пробовали использовать media queries? developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…
20 июл 2016 в 9:35
Возможный дубликат вопроса: Подвал не фиксированной высоты прижатый к низу экрана
20 июл 2016 в 9:54
Это дубликат вопроса, а не наоборот.
6 янв 2017 в 15:55
я так понимаю, что у Вас должен контент постоянно меняться, в зависимости от выбранных вкладок в каком-то меню. Я тоже сталкивался с моментами, когда нужно было, чтоб футер четко был внизу при , практически пустом контенте (даже немного скролил). Я такой момент решал бонально просто: в своем файле css я ставил .content < min-height: 600px; >( ну или 500-700px в зависимости от того какой высоты у Вас хедер, просто просчитываете контент). Я не говорю, что это решение оригинальное, но в своих проектах я его использовал и мне это не доставляло неудобств в дальнейшем.
9 апр 2017 в 19:22
9 ответов 9
Сортировка: Сброс на вариант по умолчанию
Для прижатия футера к низу экрана, есть несколько решений. Ниже представлены варианты от самого актуального до устаревшего:
1. Решение через Grid Layout для АДАПТИВНОЙ высоты футера
html < height: 100%; >body < margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; >header < background: blue; >main < background: red; >footer
header content 2. Решение через Flexbox для АДАПТИВНОЙ высоты футера
body < margin: 0; color: #fff; display: flex; flex-direction: column; min-height: 100vh; >header < background: blue; >main < /* Чтобы занимал оставшееся пространство */ flex-grow: 1; background: red; >footer < /* Чтобы footer не уменьшался */ flex-shrink: 0; background: black; > header content 3. Решение через таблицы для АДАПТИВНОЙ высоты футера
body < margin: 0; color: #fff; display: table; min-height: 100vh; width: 100%; >header < background: blue; >main < display: table-row; /* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */ height: 100%; background: red; >footer
header content 4. Решение на нативном JavaScript для АДАПТИВНОЙ высоты футера
// Высчитываем высоту footer и делаем соответствующий отступ от main: function footer() < const main = document.getElementsByTagName('main')[0], footer = document.getElementsByTagName('footer')[0] main.style.paddingBottom = footer.clientHeight + 'px' >window.addEventListener('load', footer); window.addEventListener('resize', footer);html < /* Растягиваем документ на всю высоту окна */ height: 100%; >body < position: relative; margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; >header < background: blue; >main < /* Выставляем отступ с высотой footer по умолчанию */ padding-bottom: 30px; background: red; >footer < /* Позиционируем footer внизу main */ position: absolute; bottom: 0; width: 100%; /* Высота footer по умолчанию */ height: 30px; background: black; > header content 5. Решение через calc() для ФИКСИРОВАННОЙ высоты футера
html < /* Растягиваем документ на всю высоту окна */ height: 100%; >body < position: relative; margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; >header < background: blue; >main < /* Выставляем отступ с высотой footer и header */ min-height: calc(100vh - 30px - 18px); background: red; >footer < /* Высота footer */ height: 30px; background: black; > header content 6. Решение через абсолютное позиционирование для ФИКСИРОВАННОЙ высоты футера
html < /* Растягиваем документ на всю высоту окна */ height: 100%; >body < position: relative; margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; >header < background: blue; >main < /* Выставляем отступ с высотой footer */ padding-bottom: 30px; background: red; >footer < /* Позиционируем footer внизу main */ position: absolute; bottom: 0; width: 100%; /* Высота footer */ height: 30px; background: black; > header content Отслеживать
ответ дан 2 янв 2017 в 11:11
MobiDevices MobiDevices
7,291 5 5 золотых знаков 27 27 серебряных знаков 69 69 бронзовых знаков
Если надо чтобы решение на Flexbox работало в IE, то я у себя в ответе в секции Internet Explorer есть решение.
27 мая 2018 в 19:47
Также приведенное решение на CSS Grid Layout негибкое (требует фиксированной высоты) и не работает в IE 10/11, что исправлено в моём ответе.
27 мая 2018 в 20:08
Решение на flexbox .
Более универсальное в плане сопровождаемости, так как не требует задания фиксированной высоты и хаков с position: absolute . Если вам требуется также поддерживать IE 10/11, то решение включающее их поддержку находится в секции «Flexbox для Internet Explorer 10/11».
Случай с контентом на всю оставшуюся высоту:
body < min-height: 100vh; margin: 0; display: flex; flex-direction: column; >.content < /* Занять всё оставшееся пространство */ flex-grow: 1; border: 1px dotted red; > header content Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте margin-top: auto для footer :
body < min-height: 100vh; margin: 0; display: flex; flex-direction: column; >.content < border: 1px dotted red; >footer < /* Опустить в самый низ */ margin-top: auto; > header content Flexbox для Internet Explorer 10/11
Для того, чтобы описанные выше способы заработали в IE 10/11 нужно помнить о следующих багах браузеров:
- min-height не применяется к элементу с display: flex и flex-direction: column в IE 10-11. Используйте height где это возможно.
- Chrome, Opera, and Safari не учитывают минимальный размер контента непосредственных детей контейнера c display: flex . Установите flex-shrink в 0 (вместо значения по умолчанию 1 ) чтобы избежать нежелательного «сжатия».
Случай с контентом на всю оставшуюся высоту:
body < height: 100vh; margin: 0; display: flex; flex-direction: column; >header, footer < flex-shrink: 0; >.content < /* Занять всё оставшееся пространство */ flex-grow: 1; border: 1px dotted red; > header content Если надо чтобы был отступ от контента:
body < height: 100vh; margin: 0; display: flex; flex-direction: column; >header, footer < flex-shrink: 0; >.content < border: 1px dotted red; >footer < /* Опустить в самый низ */ margin-top: auto; > header content CSS Grid Layout
Случай с контентом на всю оставшуюся высоту:
body < height: 100vh; margin: 0; display: grid; /* задаём высоту строк */ grid-template-rows: auto 1fr auto; >.content
header content Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start для footer :
body < min-height: 100vh; margin: 0; display: grid; /* задаём высоту строк */ grid-template-rows: auto 1fr auto; >.content < /* кладём элемент в начало ячейки по вертикали */ /* чтобы его высота была равна высоте контента */ align-self: start; border: 1px dotted red; > header content CSS Grid Layout для Internet Explorer 10/11
В Internet Explorer 10/11 реализована устаревшая версия модуля CSS Grid Layout. С практической точки зрения это значит, что реализация этого модуля очень сильно разнится от остальных браузеров, которые поддерживают данный модуль.
Самое главное, о чём нужно помнить, что в IE элементы не располагаются по умолчанию по свободным ячейкам по порядку, а просто кладутся друг на друга в самую первую ячейку. То есть в других браузерах значения по умолчанию grid-row : auto и grid-column: auto , тогда как в IE -ms-grid-row : 1 и -ms-column: 1 , поэтому если номер строки или стоблца элемента не совпадают с 1 , то придётся их прописывать по другому.
Оставльное — более тривиально. Часть свойств не поддерживаются (вроде grid-areas , grid-gap и т.д.), часть называются по другому или требуется другой синтаксис и могут иметь отличные умолчания.
Случай с контентом на всю оставшуюся высоту:
body < height: 100vh; margin: 0; display: -ms-grid; display: grid; /* по умолчанию в IE размер ячеек равен содержимому, */ /* тогда как в других браузерах размер ячеек растягивается */ /* под свобоодное пространство grid-контейера */ -ms-grid-columns: 100%; /* задаём высоту строк */ -ms-grid-rows: auto 1fr auto; grid-template-rows: auto 1fr auto; >.content < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 2; border: 1px dotted red; >footer < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 3; > header content Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start и -ms-grid-row-align: start для footer :
body < height: 100vh; margin: 0; display: -ms-grid; display: grid; /* по умолчанию в IE размер ячеек равен содержимому, */ /* тогда как в других браузерах размер ячеек растягивается */ /* под свобоодное пространство grid-контейера */ -ms-grid-columns: 100%; /* задаём высоту строк, разные имена свойств */ -ms-grid-rows: auto 1fr auto; grid-template-rows: auto 1fr auto; >.content < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 2; /* кладём элемент в начало ячейки по вертикали */ /* чтобы его высота была равна высоте контента */ -ms-grid-row-align: start; align-self: start; border: 1px dotted red; >footer < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 3; >.content < -ms-grid-row: 2; border: 1px dotted red; >footer
header content Отслеживать
ответ дан 2 янв 2017 в 12:26
Vadim Ovchinnikov Vadim Ovchinnikov
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
Можно ещё так, с проверкой (если мало контента, то фиксировать, иначе статика):
if( $(document).height()
.page-footer < padding: 1rem; background: #333; color: #fff; text-align: center; >.page-footer.fixed-bottom
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum accusamus cum voluptas voluptate esse asperiores cupiditate velit quaerat optio, praesentium ipsa, deserunt veniam facilis libero accusantium! Similique accusamus assumenda beatae amet harum delectus quisquam minima quidem id veniam a eaque iste labore distinctio quia cupiditate, ullam suscipit. Repellendus, porro, officiis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero atque officia, hic iure placeat, dolores amet eaque quae, eveniet laboriosam voluptatibus fugit velit aut. Facilis expedita, id quasi asperiores molestiae, numquam provident consectetur maxime ad dolorem illo, voluptas dolore accusantium quam deleniti enim ratione doloremque cum omnis ea maiores, deserunt earum eveniet minima eaque. Soluta earum amet esse rem vitae eaque enim aut obcaecati laudantium provident eius delectus nulla doloremque omnis quisquam, ut eos modi, autem tenetur! Deserunt pariatur cum aspernatur aperiam, obcaecati libero, tenetur veritatis aut praesentium architecto optio perspiciatis quo ut. Atque, soluta doloribus recusandae quibusdam ipsam qui!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, unde.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus perspiciatis molestiae nemo soluta nesciunt alias porro impedit, perferendis molestias possimus mollitia asperiores laboriosam consectetur enim odit, animi facere earum consequatur in veniam neque quae esse. Beatae iure laboriosam optio? Pariatur.
if( $(document).height()
.page-footer < padding: 1rem; background: #333; color: #fff; text-align: center; >.page-footer.fixed-bottom
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus.
Прижать футер к низу окна браузера
Иногда веб разработчикам сайтов требуется сделать так чтобы футер находился постоянно внизу страницы, т.е. прижимался к низу окна браузера. В данной статье мы покажем несколько вариантов решения. Пример HTML кода для нашей задачи:
Родитель на всю высоту окна height: 100%
Футер прижимается вниз за счет вытягивания блока контента и его родительских блоков на всю высоту height: 100% окна браузера и подъема футера вверх через отрицательный отступ margin-top: -100px для того чтобы не появлялся вертикальный скролл. В данном примере обязательно нужно указывать высоту подвала, которая должна быть равна значению отступа.
CSS код 1-го варианта:
Абсолютное позиционирование
Footer прижимается по абсолютному позиционированию от высоты родительских блоков (html, body и .wrapper), которая определена как 100%. При этом блоку .content следует определить нижний отступ, который должен быть равен или больше высоты подвала, иначе последний блок закроет часть контента.
CSS код 2-го варианта:
Имитация поведения таблицы display: table
Указав блоку .wrapper свойство таблицы, а блоку .content свойство строки таблицы (display: table и display: table-row) и когда блоку .content и всем его родительским элементам задана высота 100%, контент растянется на всю высоту экрана, за минусом высоты футера, которая определяется внутренним контентом.
CSS код 3-го варианта:
Использование CSS-функции calc()
100vh — высота окна браузера, а 100px — это высота футера. Функция calc() вычитает вторую величину из первой, в итоге футер прижимается к низу.
CSS код 4-го варианта:
Использование CSS свойства display: flex
Работает только в современных браузерах которые поддерживают это свойство
CSS код 5-го варианта:
- CSS / HTML
- FrontEnd (ФронтЭнд)