Question

您能告诉我，如何根据视口大小和导航栏的高度设置backgroundimage的高度。导航栏开始之前，backgroundimage应该适合整个bot屏幕。导航栏固定在顶部，它是一个登陆页面。如果我向下滚动，导航栏开始时，backgroundimage应该完全停止。希望你们知道，我想解释一下。您有什么想法，如何实现。

非常感谢您

Answer 1

这非常适合vh（视口高度）单位和css calc()方法一起使用。我为你做了一个例子。

视口高度单位的工作原理与%大致相同，但是1vh是视口高度的1/100，而100vh是视口高度的100/100。 （是的，还有一个大众汽车！）

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>

在视口上设置backgroundimage的大小减去导航栏

1 个答案: