Как сделать прилипающее меню книзу экрана с отступом?

Question

Всем привет!

Есть некий сайт site.ru, для которого создаются версия под ПК и версия под мобильные устройства.

Я чего то не могу сообразить как сделать прилипающее к низу экрана меню (как например в мобильной версии ВК) для мобильных устройств.

Меню сделал через:

position: fixed;
bottom: 0;
z-index: 12;

Но вот дальше случается загадка: блок перекрывает контент, а посчитать его высоту чтобы сделать отступ фиксированной высоты невозможно - он всегда разный в зависимости от сценария использования.

Можно конечно посчитать длину через JS и JS-ом же делать такой margin, но предпочтительно решение без JS.

Answer 1

По какой причине высота меню зависит от сценария? Я вижу только два варианта:

Вы задаете для блока меню фиксированную высоту и тогда у тега Body можете задать фиксированный отступ снизу равный этой высоте
Если действительно высота должна быть разной в зависимости от сценария использования, то только с помощью js определять эту высоту и тем же js устанавливать соответствующий отступ (получится скрипт в пару строк буквально)

Answer 2

Для того что бы меню "прилипало" можно воспользоваться позицией sticky:

.menu {
  display: flex;
  align-items: center;
  height: 40px;
  color: white;
  background-color: red;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}

.menu > span {
  display: block;
  margin-left: 20px;
}

<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="menu"><span>Menu<span/></div>

А с помощью JS сворачивать меню, когда, например, страница скроллится вниз.

БЛОГ НА HUSL

Как сделать прилипающее меню книзу экрана с отступом?

Ответы (2 шт):