Question

我正在研究我的第一个投资组合，在做两件事时遇到了一些麻烦。

创建固定的导航栏。当我使用position：fixed;它清除了右侧“与我联系”的浮动，一切都崩溃了。我需要这个在我的例子中保持间隔。搜索了相当长的几个小时，我还没有找到解决方案，虽然我是一个新手，所以我相信这也有一些。
对于我的着陆页照片，我正在尝试制作响应式设计，以便将其调整为可用页面大小的100％。我用高度实现了这个：100vh;然而很快就注意到它正在接受100vh，并在我的导航栏之后执行此操作，这会在下面留下多余的部分。我试图通过减少vh来补偿导航栏，但当然我意识到这不是一个很好的修复，因为它只适用于该视口高度，而不是相应的缩放。这使得我需要修复以适当地缩放内容，或允许照片在导航栏下滑动，并占据该空间以使其触及页面顶部。

相关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 。

通过这种方式，您可以通过height: calc(100v - 46px)告诉您身体占据导航栏高度的100％垂直高度减去。

以下是完整示例：

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>

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

希望这有帮助！：）

需要一个包含导航栏高度

1 个答案:

第1点

第2点