Question

我知道这听起来很有趣，但我有一个导航栏，由flexbox固定在页面顶部。它看起来很棒，但你可以看到页面内容滚动它。如果有意义的话，我需要内容消失并从导航栏底部开始在导航栏下滚动。

这是我的代码，所以你可以尝试一下，看看我在说什么。

body {
  background-image: url(background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  position: relative;
  top: 108px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-width: 100%;
  display: flex;
  height: 90px;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  z-index: ;
}

.logo {
  display: flex;
  text-decoration: none;
  color: white;
  font-family: fantasy;
  font-size: 19px;
  padding: 0;
  margin-left: 15px;
}

header a:hover {
  color: aqua;
}

nav {
  width: 60%;
  margin: 25px;
}

nav ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

nav li {}

nav a {
  color: white;
  text-decoration: none;
  font-size: 19px;
  font-family: papyrus;
}

nav a:hover {
  color: aqua;
}

.headline {
  display: flex;
  width: 30%;
  justify-content: center;
  position: relative;
  top: 454px;
  left: 498px;
  font: 24px cursive;
  z-index: ;
}

.headline a {
  text-decoration: none;
  color: white;
}

.headline a:hover {
  color: aqua;
}

main {
  height: 3000px;
  min-width: 100%;
}

footer {
  height: 100px;
  text-align: center;
  font-family: fantasy;
  font-size: 19 px;
  color: white;
}

<header>
  <a href="index.html" class="logo">
    <h1>AquaDrip</h1>
  </a>
  <nav>
    <ul>
      <li><a href="index.html">Applications</a></li>
      <li><a href="video.html">pricing</a></li>
      <li><a href="systems.html">Contact Us</a></li>
      <li><a href="about.html">Careers</a></li>
    </ul>
  </nav>
</header>


<main>
  <div class="headline">
    <h1><a href="#">Water</a> <a href="#">starts</a> <a href="#">here.</a></h1>
  </div>


</main>

<footer>
  <p>Written by: john doe</p>
  <p>2018.</p>
</footer>

Answer 1

body {
  background-color: black;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  position: relative;
  top: 108px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-width: 100%;
  display: flex;
  height: 90px;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  z-index: ;
}

.logo {
  display: flex;
  text-decoration: none;
  color: white;
  font-family: fantasy;
  font-size: 19px;
  padding: 0;
  margin-left: 15px;
}

header a:hover {
  color: aqua;
}

nav {
  width: 60%;
  margin: 25px;
}

nav ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

nav li {}

nav a {
  color: white;
  text-decoration: none;
  font-size: 19px;
  font-family: papyrus;
}

nav a:hover {
  color: aqua;
}

.headline {
  display: flex;
  width: 30%;
  justify-content: center;
  position: relative;
  top: 454px;
  left: 498px;
  font: 24px cursive;
  z-index: ;
}

.headline a {
  text-decoration: none;
  color: white;
}

.headline a:hover {
  color: aqua;
}

main {
  height: 3000px;
  min-width: 100%;
}

footer {
  height: 100px;
  text-align: center;
  font-family: fantasy;
  font-size: 19 px;
  color: white;
}

<!doctype html>
<html>

<head>
  <title>AquaDrip</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <header>
    <a href="index.html" class="logo">
      <h1>AquaDrip</h1>
    </a>
    <nav>
      <ul>
        <li><a href="index.html">Applications</a></li>
        <li><a href="video.html">pricing</a></li>
        <li><a href="systems.html">Contact Us</a></li>
        <li><a href="about.html">Careers</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <div class="headline">
      <h1>
        <a href="#">Water</a>
        <a href="#">starts</a>
        <a href="#">here.</a>
      </h1>
    </div>
  </main>

  <footer>
    <p>Written by: john doe</p>
    <p>2018.</p>
  </footer>

</body>

</html>

如何使我的flexbox导航底部没有背景切断？

1 个答案: