时间戳

首页 > 解决方案 > 如何为汉堡导航栏设置动态高度

html - 如何为汉堡导航栏设置动态高度

问题描述

我正在开发一个需要重新设计导航栏的应用程序。我已经完成了相同的操作，但问题是不同页面中发生的高度问题。例如在下面的快照中，导航栏的高度在 中是完美的login page，但在registration page导航栏的高度直到页脚才完全覆盖。

登录页面

注册页面

nav {
  /* height: 15vh; */
  height: 91px;
  background: #ffd415;
}

.nav-links {
  display: flex;
  list-style: none;
  width: 50%;
  background: #ffd415;
  height: 100%;
  justify-content: space-evenly;
  align-items: center;
  margin-left: auto;
}

.nav-links li a {
  color: #424242;
  text-decoration: none;
  font-size: 50px;
  font-family: Raleway-Bold;
}

.line {
  width: 30px;
  height: 3px;
  background: #424242;
  margin: 5px;
}

nav {
  position: relative;
}

.hamburger {
  position: absolute;
  cursor: pointer;
  right: 5%;
  top: 50%;
  transform: translate(-5%, -50%);
  z-index: 1;
}

.nav-links {
  position: relative;
  background: #ffd415;
  z-index: 1;
  height: 665px;
  /* height: 100vh; */
  width: 100%;
  flex-direction: column;
  clip-path: circle(100px at 90% -15%);
  -webkit-clip-path: circle(100px at 90% -15%);
  transition: all 1s ease-out;
  pointer-events: none;
}

.nav-links.open {
  clip-path: circle(1000px at 90% -10%);
  -webkit-clip-path: circle(1000px at 90% -10%);
}

.nav-links li:nth-child(1) {
  transition: all 0.5s ease 0.2s;
}

.nav-links li:nth-child(2) {
  transition: all 0.5s ease 0.4s;
}

.nav-links li:nth-child(3) {
  transition: all 0.5s ease 0.6s;
}

li.fade {
  opacity: 1;
}

.logo-left {
  text-align: center;
}

.logo {
  color: #424242;
}
<nav>
  <div class="logo-left">
    <label class="logo">Marshamllow</label>
  </div>
  <div class="hamburger">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <ul class="nav-links">
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Projects</a></li>
  </ul>
</nav>

似乎是因为我给出了固定高度665px，即我想知道动态设置高度的方法，所以如果页面内容增加，那么导航栏应该在所有页面上保持一致，请建议我实现的最佳实践相同的。

请参考 Jsfiddle：- https://jsfiddle.net/aparnabhargav/k3tjeod6/1/

标签： htmlcss

解决方案

您可以尝试使用vh将覆盖窗口高度的单位。更多在这里

如果页脚的高度是固定的，那就更好了。就像是：

nav {
    height:calc(100vh - XXpx); /*where "XX" is footer height*/
}

推荐阅读