как установить динамическую c высоту для панели навигации гамбургера

Question

Я работаю над приложением, в котором мне нужно изменить дизайн панели навигации. Я выполнил то же самое, но проблема в высоте на разных страницах. например, на снимке ниже высота панели навигации идеальна в 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>

кажется, из-за фиксированной высоты, которую я дал i, e 665px, я хочу знать способ динамической установки высоты, чтобы, если содержимое страницы становится увеличьте, тогда панель навигации должна быть единообразной на всех страницах, пожалуйста, предложите мне лучший способ достижения того же.

Пожалуйста, обратитесь к Jsfiddle для того же: - https://jsfiddle.net/aparnabhargav/k3tjeod6/1/

Answer 1

Вы можете попробовать использовать vh единиц, которые будут покрывать высоту окна. Подробнее здесь

, если высота вашего нижнего колонтитула фиксированная, даже лучше. что-то вроде:

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