html - 需要一个固定的导航栏和包含导航栏高度的登录页面 VH

Question

我正在制作我的第一个作品集，但在做两件事时遇到了一些麻烦。

1. 创建一个固定的导航栏。当我使用 position: fixed;它清除了我在右侧“联系我”上的 float ，一切都崩溃了。在我的示例中，我需要它来保持间距。搜索了好几个小时，但到目前为止我还找不到修复程序，尽管我是新手，所以我相信这也有一些影响。

2. 对于我的着陆页照片，我正在尝试进行响应式设计，使其能够调整为可用页面大小的 100%。我已经用 height: 100vh 实现了这个；但是很快注意到它正在使用 100vh，并在我的导航栏之后执行此操作，这会在下方留下多余的部分。我试图通过减少 vh 来补偿导航栏，但我当然意识到这不是一个很好的修复，因为它只适用于该视口(viewport)高度，而不是相应地缩放。这让我要么需要修复以适本地缩放内容，要么允许照片在导航栏下方滑动并占据该空间，以便它触及页面顶部。

相关的 HTML:

    <header>
      <div class="navbar">
        <ul>
          <li><a href="#home" class="active">Home</a></li>
          <li><a href="#aboutme">About Me</a></li>
          <li><a href="#mywork">My Work</a></li>
          <li style="float:right"><a href="#contact">Contact Me</a></li>
       </ul>
     </div>
   </header>
   <main>
     <section class="homeLanding">
       <h1>Hi, I'm Michael.</h1>
       <p>A Front-End Web Dev</p>
       <a href="#aboutMe" class="myBtn">Start here to learn more about me,
       <br>and how I can help you</a>
     </section> 

相关 CSS:

body {
   margin: 0;
}

/** style navbar **/
.navbar ul {
   background-color: #333;
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden
}
.navbar li {
   float: left;
}
.navbar li a {
   display: block;
   text-align: center;
   text-decoration: none;
   color: white;
   padding: 14px 16px;
}
.navbar li a:hover:not(.active) {
   background-color: #111;
}
.active {
   background-color: #4CAF50;
}

/** style landing page **/
.homeLanding {
   height: 100vh;
   width: 100%;
   margin: auto;
   background: url(/**Insert Image**/);
   display: flex;
   background-size: cover;
   background-position: center;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   top: 0;
}
.myBtn {
   color: white;
   text-decoration: none;
   border: solid 3px white;
   border-radius: 6px;
   padding: 7px 7px 0px 7px;
}
p, h1 {
   color: white;
}

背景图片:http://res.cloudinary.com/dtgbwo6mf/image/upload/v1502053498/bg_b0vucn.jpg

Answer 1

要点 1

为了拥有position: fixed在你的导航栏上而不丢失它的布局，你需要做的就是确保应用 width: 100%

要点 2

您正在寻找的是利用 CSS 的 calculation-driven values .

通过这种方式，您可以告诉您 body 占据垂直高度的 100% 减去 导航栏的高度，使用 height: calc(100v - 46px) .

这是一个完整的示例:

body {
  margin: 0;
}


/** style navbar **/

.navbar {
  position: fixed;
  width: 100%;
}

.navbar ul {
  background-color: #333;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden
}

.navbar li {
  float: left;
}

.navbar li a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: white;
  padding: 14px 16px;
}

.navbar li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}


/** style landing page **/

.homeLanding {
  padding-top: 46px;
  height: calc(100vh - 46px);
  width: 100%;
  margin: auto;
  background: url('http://res.cloudinary.com/dtgbwo6mf/image/upload/v1502053498/bg_b0vucn.jpg');
  display: flex;
  background-size: cover;
  background-position: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  top: 0;
}

.myBtn {
  color: white;
  text-decoration: none;
  border: solid 3px white;
  border-radius: 6px;
  padding: 7px 7px 0px 7px;
}

p,
h1 {
  color: white;
}

<header>
  <div class="navbar">
    <ul>
      <li><a href="#home" class="active">Home</a></li>
      <li><a href="#aboutme">About Me</a></li>
      <li><a href="#mywork">My Work</a></li>
      <li style="float:right"><a href="#contact">Contact Me</a></li>
    </ul>
  </div>
</header>
<main>
  <section class="homeLanding">
    <h1>Hi, I'm Michael.</h1>
    <p>A Front-End Web Dev</p>
    <a href="#aboutMe" class="myBtn">Start here to learn more about me,
       <br>and how I can help you</a>
  </section>
  <section class="homeLanding">
    <h1>SAMPLE EXTRA PADDING</h1>
    <p>SAMPLE EXTRA PADDING</p>
    <a href="#aboutMe" class="myBtn">SAMPLE EXTRA PADDING
       <br>SAMPLE EXTRA PADDING</a>
  </section>

请注意，我添加了第二个 <section>到 HTML 以演示固定导航栏的滚动效果。

希望对您有所帮助! :)