垂直導航菜單不適合視口

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;
}