Question

测试全屏着陆页，我大部分时间都在使用它，但是当我在图像的部分容器上方添加一个导航栏时，我遇到了问题。如果导航栏没有显示以查看内容，则必须滚动得比滚动更多。

有什么方法可以解决这个问题吗？

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  height: 100%;
  width: 100%;
  background: #1F2121
}

#top-nav {
  background: #1F2121;
  border-bottom: 4px solid #FFD700;
}

#bot-nav {
  background: #1F2121;
  border-top: 4px solid #FFD700;
}

#copyright {
  background: #FFD700;
}

#bot-nav ul {
  list-style: none;
  padding: 0;
}

#copyright a {
  text-decoration: none;
  color: #1F2121;
}

header section {
  display: flex;
  height: 90px;
  width: 500px;
  border-left: 1px solid #FFD700;
  border-right: 1px solid #FFD700;
}

#top-nav section a {
  text-decoration: none;
  color: #FFD700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

#top-nav section a:hover {
  color: #1F2121;
  background-color: #FFD700;
}

.center-section {
  display: flex;
  width: 1000px;
  margin: auto;
}

.center-section>* {
  flex: 1 1 0;
}

.navbar {
  display: flex;
}

.navbar ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  align-self: center;
}

.navbar ul li {
  display: flex;
  flex: 1 1 100%;
}

.navbar ul li a {
  text-decoration: none;
  color: #FFD700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  border-right: 1px solid #FFD700;
}

.navbar ul li a:hover {
  color: #1F2121;
  background-color: #FFD700;
}

.bot-list {
  padding: 20px 0px;
}

.bot-list ul li a {
  text-decoration: none;
  color: #FFD700;
}

.landing {
  height: 100%;
  width: 100%;
  background: url('../images/gold-grid.png') no-repeat 50% 50%;
  background-size: cover;
}

.article {
  padding: 30px 0px;
  color: #FFD700;
}

.copyright-container {
  width: 1000px
}

＆＃13;

<header>
  <div id="top-nav">
    <div class="center-section">
      <section id="logo">
        <a href="">Home Logo</a>
      </section>
      <div class="navbar">
        <ul>
          <li>
            <a href="">About</a>
          </li>
          <li>
            <a href="">Store</a>
          </li>
          <li>
            <a href="">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

<body id="main-content">
  <section class="landing">
  </section>
  <p class="article">
    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.
  </p>
</body>

<footer>
  <div id="bot-nav">
    <div class="center-section">
      <div class="bot-list">
        <ul>
          <li>
            <a href="">About</a>
          </li>
          <li>
            <a href="">Store</a>
          </li>
          <li>
            <a href="">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="copyright">
    <div copyright-container>
      <p>&copy Flex Test</p>
      <p>Designed by
        <a href="">Incredible Flex Inc.</a>
      </p>
    </div>
  </div>
</footer>

＆＃13;

html - 带导航栏的全屏登陆页面

0 个答案: