帶有頂部、底部和溢出的側邊導航

Question

我正在嘗試創建帶有頂部和底部的側面導航。 當 window 高度縮小時，我希望底部導航與頂部和頂部導航重疊以進行滾動。 我放入了一些 CSS 漸變，以幫助向用戶指示項目已溢出，但我想要一個滾動條。 如果內容溢出，我只想要滾動條（可能需要 JS，但我可能錯了）。

幫助表示贊賞

在這里擺弄，下面是 HTML 和 CSS。

 html, body { margin: 0; padding: 0; overflow: hidden; box-sizing: border-box; background-color: #fff; } html, body, .pane-sidebar { height: 100%; }.pane-sidebar { background-color: #456081; position: relative; text-align: center; width: 75px; }.full-height, .k-splitter.full-height { height: 100%; padding: 0; margin: 0; }.pane-sidebar.sidebar-menu-wrapper { padding: 1.25rem 0; min-height: 40rem; overflow: auto; }.pane-sidebar.brand { padding: 0; margin: 0; font-weight: normal; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 0.875rem; color: #ffffff; }.pane-sidebar ul.primary { min-height: 26.25rem; }.pane-sidebar ul { list-style: none; margin: 0; padding: 2rem 0; text-align: center; }.pane-sidebar ul li { padding-bottom: 1.5rem; }.pane-sidebar ul li.secondary { padding-bottom: 0.625rem; }.pane-sidebar ul li.secondary a, .pane-sidebar ul li.secondary button { font-size: 1.125rem; }.pane-sidebar ul li a { font-size: 2rem; color: #ffffff; text-decoration: none; display: block; }.pane-sidebar ul li.secondary a span { font-size: 0.625rem; }.pane-sidebar ul li a span { font-size: 0.75rem; color: #ffffff; display: block; }.pane-sidebar ul.secondary { position: absolute; bottom: 0; left: 50%; width: 4rem; margin-left: -2rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #456081 15%, #456081 100%); }.pane-sidebar ul li.secondary a, .pane-sidebar ul li.secondary button { font-size: 1.125rem; } button { background-color: transparent; border: 0 none; }.pane-sidebar.show-errors { cursor: pointer; } button { font-family: inherit; font-size: 100%; line-height: 1.15; overflow: visible; text-transform: none; background-color: #4b708b; color: #fff; padding: 0.25rem; }

 <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/