Не могу сделать фон на весь экран

Question

Делаю простенькую игру и там есть меню с фоном которое перекрывает весь контент,

.block {
  width: 100%;
  height: 100vh;
  background-color: #0F111A;
  z-index: 3;
}

но при окрытии консоли разработчика появляется ползунок скролла вниз, если опуститься вниз то весь контент который перекрыт фоном виден будет, пробывал свойством "height: 100%;" в итоге без результатно

Answer 1

Это логично, т.к. у вас общая высота страницы больше чем 100vh.

В коде вы используете z-index. Это свойство работает только с позиционированными элементами. Т.е. вашем меню как раз должно быть таким блоком. Значит можно задать для него position: fixed; left: 0; top: 0; right: 0; bottom: 0; и тогда этот блок заполнит всю видимую область страницы и никакие скроллы не будут иметь значения.

body {
  font-family: sans-serif;
}

.menu {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0 0 0 / .5);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 300%;
  font-weight: 600;
  color: white;
}

<nav class="menu">Меню имеет полупрозрачный фон</nav>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar felis et quam congue, eget tincidunt orci maximus. Vestibulum in odio neque. Ut vitae nunc nisl. Cras id bibendum felis. Donec eget ex quis dolor ultricies semper. Vestibulum ultrices
  faucibus finibus. Nunc convallis non felis sed efficitur. Integer finibus tristique urna, a sodales felis dictum sed. Proin odio dui, scelerisque consequat tempor eu, placerat ac nibh. Curabitur vel eros iaculis, fermentum odio non, tincidunt nibh.
  Vivamus lobortis laoreet congue. Morbi ut lacus purus. Proin feugiat condimentum velit eget tincidunt. Nam pharetra vehicula purus eleifend ultrices. Aliquam metus ipsum, cursus vel dictum quis, dictum id felis. Sed et fringilla diam. Nunc sed velit
  risus. Praesent finibus at orci eu convallis. Nulla facilisi. Morbi a mi et augue faucibus pharetra ac vel felis. Aenean vel finibus augue, hendrerit tristique felis. Proin sollicitudin cursus gravida. Integer pulvinar in quam sed semper. Duis pulvinar
  erat sed magna posuere cursus. Praesent eu nulla tempor, vehicula lacus vel, pulvinar lacus. Suspendisse aliquet dapibus enim, et imperdiet orci congue vitae. Nulla facilisi. Nulla mattis nibh nec justo congue, at eleifend lacus pulvinar. Vivamus vitae
  lorem sapien. Vestibulum et ex mauris. Aenean eros ex, porta ac odio vel, dignissim faucibus sapien. Proin convallis quam dolor. Vestibulum accumsan felis sed erat laoreet lacinia. Ut nec molestie urna, at accumsan massa. Fusce dictum leo a odio iaculis
  mollis. Curabitur commodo magna ultricies, blandit lectus ut, lacinia est. Suspendisse in pulvinar urna, ac lacinia tellus. Praesent varius accumsan nisl sed aliquam. Maecenas ac dolor non velit vehicula tempus. Phasellus iaculis, odio eget condimentum
  eleifend, ligula quam blandit nunc, ac luctus purus mauris id magna. Donec non dictum dolor, id facilisis ipsum. Curabitur leo tellus, blandit rutrum cursus non, tristique eget libero. Vestibulum vestibulum nunc massa, vitae porttitor nibh congue eget.
  Sed maximus felis sit amet efficitur feugiat. Sed eu lacus iaculis, accumsan justo ac, posuere dui. Suspendisse semper eros sed est venenatis lobortis. Vivamus laoreet eros justo. Fusce tempor placerat hendrerit. Phasellus enim arcu, tincidunt non nisi
  ut, euismod maximus tortor. Donec id velit id magna congue tempor at id diam. Phasellus efficitur suscipit elementum. Vestibulum at diam scelerisque, elementum velit non, imperdiet lectus. Fusce turpis lacus, pellentesque eu arcu id, ullamcorper luctus
  eros. Aenean sit amet odio tempor, pellentesque turpis a, viverra nisl. Mauris ut ex vehicula, tempor leo sit amet, malesuada dolor. Praesent rhoncus, dui eu mattis facilisis, ex diam varius risus, sed bibendum justo metus vitae odio. Donec eget porttitor
  enim. Nullam id orci venenatis, aliquam massa nec, rhoncus ligula. Donec semper lobortis risus, ac iaculis urna gravida feugiat. Vivamus odio neque, elementum quis leo eget, tristique cursus metus. Nunc venenatis egestas nunc a volutpat. Proin elit
  nunc, pretium a mi ut, placerat feugiat elit. </p>

БЛОГ НА HUSL

Не могу сделать фон на весь экран

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