установить размер фонового изображения в окне просмотра минус навигационная панель - PullRequest
Новая
       34

установить размер фонового изображения в окне просмотра минус навигационная панель

0 голосов
/ 06 марта 2019

подскажите, как я могу установить высоту фонового изображения в зависимости от размера области просмотра и высоты панели навигации. Фоновое изображение должно занимать весь экран от бота, пока не начнется навигационная панель. Навбар фиксируется сверху, это целевая страница. Если я прокручиваю вниз, backgroundimage должен быть остановлен именно тогда, когда начинается navbar. Надеюсь, вы, ребята, знаете, что я пытаюсь объяснить. У вас есть идеи, как этого достичь.

Большое спасибо

1 Ответ

1 голос
/ 06 марта 2019

Идеально подходит для vh (высота окна просмотра) и css calc() метода для совместной работы.Я сделал для вас пример.

Единица высоты окна просмотра работает примерно так же, как %, но 1vh составляет 1/100 высоты окна просмотра, а 100vh - 100/100 высоты. (да, есть также единица vw!)

Функция calc() используется для вычитания высоты панели навигации и контейнера фона.

/* Answer */

.backgroundImage {
  position: absolute;
  height: calc(100vh - 30px); /* you can use calc() function. */
  width: 100%;
  background-image: url('https://placehold.it/2000x2000');
  background-size: cover;
  background-position: center center;
  z-index: -1;
}

/* additional styling */

body {
  background: lightblue;
  padding-top: 30px;
  margin: 0;
  font-family: arial;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: gray;
  height: 30px;
}



main {
  position: relative;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  max-width: 400px;
  line-height: 30px;
  width: 100%;
  margin: auto;
  text-align: center;
}

li {
  display: inline-block;
}

a {
  color: #FFF;
  text-decoration: none;
  padding: 0 10px;
}
<html>

<head></head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Test link</a></li>
        <li><a href="#">Test link</a></li>
        <li><a href="#">Test link</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div class="backgroundImage"></div>
  </main>
</body>

</html>
...