带有顶部、底部和溢出的侧边导航

Question

我正在尝试创建一个带有顶部和底部的侧面导航。当窗口高度缩小时，我希望底部导航与顶部重叠并且顶部导航具有滚动功能。我添加了一些 CSS 渐变来帮助向用户指示项目已溢出，但我想要一个滚动条。我只想要内容溢出时的滚动条（可能需要 JS，但我可能是错的）。感谢帮助在这里捣鼓，下面是 HTML 和 CSS。<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script><div class="pane-sidebar full-height">  <div class="sidebar-menu-wrapper">    <h1 class="brand">Brand</h1>    <ul class="primary">      <li>        <a href="#">          <i class="far fa-sticky-note"></i>          <span>Top</span>        </a>      </li>      <li class="secondary">        <a href="#">          <i class="far fa-sticky-note"></i>          <span>Top</span>        </a>      </li>      <li class="secondary">        <a href="#">          <i class="far fa-sticky-note"></i>          <span>Top</span>        </a>      </li>      <li class="secondary">        <a href="#">          <i class="far fa-sticky-note"></i>          <span>Top</span>        </a>      </li>      <li class="secondary">        <a href="#">          <i class="far fa-sticky-note"></i>          <span>Top</span>        </a>      </li>      <li class="secondary">        <a href="#">          <i class="far fa-sticky-note"></i>          <span>Top</span>        </a>      </li>      <li class="secondary">        <a href="#">          <i class="far fa-sticky-note"></i>          <span>Top</span>        </a>      </li>    </ul>    <ul class="secondary">      <li class="secondary">        <button class="show-errors" type="button">          <i class="far fa-bell"></i>        </span>      </button>    </li>    <li class="secondary">      <a href="#">        <i class="fas fa-box"></i>        <span>Bottom</span>      </a>    </li>  </ul></div>

Answer 1

您可以在菜单包装器上使用 Flexbox。然后让你的主元素填充额外的空间并显示滚动条：

.sidebar-menu-wrapper {

  display: flex;

  flex-direction: column;

  flex-wrap: nowrap;

  justify-content: flex-start;

  align-items: stretch;

  align-content: stretch;      

}

.primary {

   flex: 1;

   overflow-y: auto;

}

这是一个小提琴： https: //jsfiddle.net/mehg8uL2/