垂直导航菜单不适合视口

Question

在垂直导航菜单上工作时效果很好，但遇到导航菜单填满整个页面（视口）的问题。

菜单在页面中间结束。 （图片）在此处输入图片描述

不确定问题出在哪里，但希望得到一些关于我哪里出错的线索？

提前致谢。

HTML

<div class="header-social">
    <div class="hamburger-vertical">
        <div class="menu-icon">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </div>
    </div>
  <nav class="header-nav-secondary">
    <ul>
      <li class="brands">BRANDS</li>
     
   
    </ul>
  </nav>
</div>

CSS

/* NAV BAR CSS*/

.header-social {
  float: right;
  transform: rotate(-90deg) translateY(-100%);
  transform-origin: top right;
  background: #7D522A66;
  height: 75px;
  width: 100%;
    z-index: 2000;
    position: absolute;
}

.hamburger-vertical{
    border: solid 1px;
    float: right;
    width: 117px;
    height: 100%;
    background-color: #CAA571;
}

.menu-icon{
    transform: rotate(90deg);
    position: fixed;
    padding: 1px 5px 0 55px;
}
.menu-icon > .line {
    background-color: #292929;
    height: 1.5px;
    display: block;
    width: 35px;
}
.menu-icon > .line + .line {
    margin-top: 8px;
}



.header-nav-secondary{
    float: right;

}


li.brands{
    transform: rotate(180deg);
    font-family: Montserrat, sans-serif;
    text-transform: capitalize;   
    color: white;
    padding-left: 40px;
    letter-spacing: 2px;
    display: inline-block;
    padding-bottom: 5px;
}

Answer 1

假设“header-nav-secondary”旨在位于视口的 100% 高度：您是否尝试将其高度设置为 100vh？ vh 单位是视口的高度，因此将其设置为 100vh 应该使其成为视口高度的 100%。

.header-nav-secondary{
  float: right;
  height: 100vh;
}