Мы часто сталкиваемся с такой проблемой: как с помощью CSS добиться эффекта, что нижний элемент может «прилипнуть к низу».Для «прилипания к низу» в этой статье есть два понимания:
- Во-первых, независимо от объема содержимого, мы хотим, чтобы кнопка была зафиксирована в нижней части видимого окна, а область содержимого была прокручиваемой.
- Во-вторых, когда в области содержимого меньше содержимого, область нижнего колонтитула не располагается вместе с областью содержимого, а всегда отображается внизу экрана; когда в области содержимого много содержимого, нижний колонтитул может увеличиваться вместе с высотой области содержимого. Растянутый, всегда отображается в самом низу страницы.
Когда дело доходит до реализации эффекта «всасывания снизу», вы можете знать больше о макете липкого футера, но этот метод в основном используется для решения второй ситуации. В этой статье будут использоваться следующие три схемы для достижения двух вышеуказанных эффектов соответственно, а также кратко описан принцип и его применение. Контейнер (обертка) состоит из двух частей, а именно содержимого (content) и фиксируемой области внизу (footer).
html настройки
<!-- wrapper是包裹content和footer的父容器 --></div>
<div class="wrapper">
<div class="content">
<ul>
<!-- 页面主体内容区域 --></div>
<li>1.这是内容，这是内容……</li>
<li>2.这是内容，这是内容……</li>
<li>3.这是内容，这是内容……</li>
<li>4.这是内容，这是内容……</li>
<li>5.这是内容，这是内容……</li>
<li>6.这是内容，这是内容……</li>
<li>7.这是内容，这是内容……</li>
<li>8.这是内容，这是内容……</li>
<li>9.这是内容，这是内容……</li>
</ul>
</div>
<div class="footer">
<!-- 需要做到吸底的区域 -->
底部按钮
</div>
</div>
Примечание. Реализация следующих решений основана на этой HTML-структуре.
Вариант 1: Используйте position для позиционирования фиксируемого элемента
Принципиальный анализ
- Надеемся, что высота внешнего контейнера враппера (включая html и body) заполнит весь экран, то есть выставим высоту height: 100%, а у враппера выставим min-height: 100%, здесь вместо этого выставляем min-height высоты, чтобы убедиться, что минимальная высота всей обертки может быть растянута на весь экран.Даже если содержимого недостаточно для заполнения экрана, высота обертки все равно равна высоте полного экрана; когда высота обертки увеличивается с высотой содержимого, ее высота может быть больше доступной высоты Высота окна просмотра.
- Установите значение padding-bottom оболочки так, чтобы оно было больше или равно значению высоты нижнего колонтитула, чтобы гарантировать, что содержимое в содержимом не будет закрыто областью нижнего колонтитула внизу.
- Для установки метода позиционирования нижнего колонтитула здесь следует различать два эффекта: если вы хотите, чтобы нижний колонтитул был зафиксирован внизу страницы, установите position: относительный обертки в это время и, соответственно, установите position: absolute для нижнего колонтитула, чтобы нижний колонтитул был абсолютно расположен относительно обертки, чтобы, независимо от того, сколько контента, нижний колонтитул все еще мог быть закреплен внизу страницы; если вы хотите, чтобы колонтитул был закреплен внизу видимого window, установите position:fixed для нижнего колонтитула и установите соответствующее позиционирование.
- Установите высоту на фиксированное значение высоты.
Применимая сцена
Используемые свойства хорошо реализованы в различных браузерах, по сравнению со второй и третьей схемами этот способ более рекомендуемый. Это не относится к следующим сценариям: в фиксированной области есть текстовое поле, потому что в системе ios, когда текстовое поле вызывает метод ввода, фиксированная область будет подпрыгивать вверх, и есть расстояние от дна.
закреплен внизу страницы
Демо демо:код спрей.IO/Hu0950/спрей/…
настройки css
html,
body
height 100%
.wrapper
position relative // 关键
box-sizing border-box
min-height 100% // 关键
padding-bottom 100px // 该值设置大于等于按钮的高度
ul
list-style none
li
height 100px
background lightblue
.footer
position absolute // 关键
bottom 0
left 0
right 0
height 100px // 设置固定高度
background orange
закреплен в нижней части области просмотра
Демо демо:код спрей.IO/Hu0950/спрей/…
настройки css
html,
body
height 100%
.wrapper
box-sizing border-box
min-height 100% // 关键
padding-bottom 100px // 该值设置大于等于按钮的高度
ul
list-style: none
li
height 100px
background lightblue
.footer
position fixed // 使按钮固定于可视窗口的底部
bottom 0
left 0
right 0
height 100px // 设置固定高度
background orange
Вариант 2: реализовано с использованием макета flexbox
Применимая сцена
Структура гибкого макета проста, а код лаконичен. Но у flex есть проблемы с совместимостью, и вам нужно быть внимательным при использовании этого способа компоновки. в реализациизакреплен внизу страницыПри использовании этой идеи эластичного макета высота фиксированной области внизу может быть гибко установлена, и нет необходимости определять высоту нижнего колонтитула, что также является преимуществом этого метода.
закреплен внизу страницы
Демо демо:код спрей.IO/Hu0950/спрей/…
Принципиальный анализ
- Установить min-height враппера: 100%.Здесь вместо высоты выставляется min-height.Это чтобы растянуть минимальную высоту всего враппера на весь экран,то есть когда контента не хватает для заполнения экран, высота обертки по-прежнему полный экран, когда Высота обертки изменяется с высотой содержимого.Его высота может быть больше, чем высота видимого окна, не всегда равна высоте экрана.
- Установите для макета оболочки значение flex, а для содержимого flex: 1, чтобы высота содержимого всегда равнялась высоте оболочки минус высота нижнего колонтитула.
настройки css
html,
body
height 100%
.wrapper
min-height 100% // 关键
display flex // 关键
flex-direction column // 关键
.content
flex 1 //关键
ul
list-style none
li
height 100px
background lightblue
// 高度可不设置
.footer
padding 20px
background orange
закреплен в нижней части области просмотра
Демо демо:код спрей.IO/Hu0950/спрей/…
Принципиальный анализ
В дополнение к вышесказанному (анализ в Сценарии 2 — исправлено внизу страницы) необходимо отметить следующие моменты:
- Поскольку нижний колонтитул находится вне потока документа из-за фиксированной настройки, необходимо установить отступ для обертки, который должен быть больше или равен высоте кнопки, чтобы нижний колонтитул не закрывал содержимое области содержимого.
- Установите фиксированный метод позиционирования нижнего колонтитула и установите соответствующее позиционирование, вы можете сделать нижний колонтитул фиксированным в нижней части видимого окна.
настройки css
html,
body
height 100%
.wrapper
display flex // 关键
min-height 100% // 关键
padding-bottom 62px // 该值设置大于等于按钮的高度
flex-direction column // 关键
.content
flex 1 //关键
ul
list-style: none
li
height 100px
background lightblue
.footer
position fixed // 关键
left 0
right 0
bottom 0
padding 20px
background orange
Вариант 3: Реализовано с помощью calc
Применимая сцена
Это решение не требует дополнительной обработки стилей, а код лаконичен, но, к сожалению, более ранняя версия системы мобильного терминала не совместима с атрибутом calc.
закреплен внизу страницы
Демо демо:код спрей.IO/Hu0950/спрей/…
Принципиальный анализ:
- Настройка обертки min-height: 100% заключается в том, чтобы надеяться, что высота содержимого может заполнить весь экран, когда содержимое маленькое.В то же время, когда содержимое содержимого увеличивается до высоты, превышающей экран, высота обертки может увеличиваться вместе с высотой содержимого, таким образом гарантируется, что нижний колонтитул будет располагаться под содержимым в свою очередь.
настройки css:
html,
body
height 100%
.wrapper
min-height 100% //关键：是min-height而不是height
.content
min-height calc(100% - 100px) //关键：是min-height而不是height
ul
list-style none
li
height 100px
background lightblue
// 高度固定
.footer
height 100px
background orange
закреплен в нижней части области просмотра
Демо демо:код спрей.IO/Hu0950/спрей/…
Принципиальный анализ:
- Обертка устанавливает height: 100%, чтобы надеяться, что независимо от того, сколько содержимого, его высота равна высоте экрана Таким образом, высота содержимого = высота обертки родительского элемента - высота нижнего колонтитула фиксированного элемента внизу, и, наконец, необходимо добавить содержимое. При переполнении: прокрутка скрытая часть содержимого также может отображаться с помощью прокрутки.
- Оболочка родительского элемента содержимого устанавливает высоту: 100%, чтобы гарантировать, что при вычислении высоты содержимого 100% фиксируется равным высоте экрана, а не изменяется вместе с высотой содержимого содержимого.
настройки css:
html,
body,
.wrapper
height 100%
.content
height calc(100% - 100px) // 关键：使用height，而不是min-height
overflow scroll // 关键
ul
list-style none
li
height 100px
background lightblue
.footer
position fixed
left 0
right 0
bottom 0
height 100px
background orange
напиши в конце
Приведенные выше схемы реализации были опробованы автором в проекте, также для каждой схемы даны демоверсии, что удобно для отладки и проверки каждому.Каждый метод реализации имеет ограничения, такие как необходимость фиксации высоты футера, или Не подходит для систем с младшими версиями мобильных терминалов и т.д. Вы можете выбрать наиболее подходящее решение в соответствии с вашими конкретными потребностями.
В связи с потребностями недавнего проекта я проверил много информации из Интернета, но трудно получить решение, которое можно использовать, или отсутствие анализа принципа реализации, поэтому я сделал резюме вышеизложенного. проблемы и написал эту статью. Надеюсь, это будет полезно для вас, ребята. Если что-то не так со статьей или письмо не очень хорошее, пожалуйста, поправьте меня своим трудом.Вы также можете обсудить некоторые проблемы совместимости, возникающие при решении проблемы «нижнего подсоса», или предложить какие-то лучшие решения~
Справочная статья