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

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 {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; flex-wrap: nowrap;&nbsp; justify-content: flex-start;&nbsp; align-items: stretch;&nbsp; align-content: stretch;&nbsp; &nbsp; &nbsp;&nbsp;}.primary {&nbsp; &nbsp;flex: 1;&nbsp; &nbsp;overflow-y: auto;}这是一个小提琴： https:&nbsp;//jsfiddle.net/mehg8uL2/