无法将 MaterializeCSS sidenav 列表滚动到底部答案

【问题标题】：Unable to scroll MaterializeCSS sidenav list to the bottom无法将 MaterializeCSS sidenav 列表滚动到底部
【发布时间】：2021-05-08 02:55:52
【问题描述】：

我正在这个网站上工作，它将使用物化 css 框架。我已经构建了其中的一些，但一直遇到sidenavs的问题。我已经解决了大部分问题，但我仍然无法滚动到 sidenav 列表的末尾。我添加了一些自定义样式，但我认为这不会干扰它。不太确定出了什么问题。运行代码并尝试将左侧导航一直滚动到底部。它会停止在屏幕外某处滚动，并且最后一个列表元素永远不会变得可见。

<!DOCTYPE html>
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Website Title -->
  <title>The Demo</title>
  <!-- Custom styles -->
  <style>
    /* Custom navbar shadow */
    
    .navbar-fixed {
      z-index: 1000;
    }
    /* Custom sizing and shadow for sidenav */
    
    .custom-sidenav {
      top: 64px;
    }
    
    @media only screen and (max-width: 600px) {
      .custom-sidenav {
        top: 0;
      }
      .navbar-fixed {
        z-index: 997;
      }
    }
    /* Custom sizing for container to fit sidenav */
    
    .custom-content-container {
      padding-left: 157px;
      padding-right: 157px;
    }
    
    @media only screen and (max-width: 992px) {
      .custom-content-container {
        padding-left: 0;
        padding-right: 0;
      }
    }
  </style>
</head>

<body>
  <!-- NavBar -->
  <header class="navbar-fixed">
    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo center">The Demo</a>
        <a href="#" data-target="sidenav-1" class="sidenav-trigger show-on-large brand-logo left"><i class="material-icons">menu</i></a>
        <a href="#" data-target="sidenav-2" class="sidenav-trigger show-on-large brand-logo right"><i class="material-icons">shopping_cart</i></a>
      </div>
    </nav>
  </header>
  <!-- Menu -->
  <aside id="sidenav-1" class="sidenav sidenav-fixed custom-sidenav">
    <ul>
      <li class="center">
        <h5>Menu</h5>
      </li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li><a href="#">Menu Link</a></li>
      <li>
        <div class="divider"></div>
      </li>
      <li><a href="#" class="btn">Logout</a></li>
    </ul>
  </aside>
  <!-- Shopping Cart -->
  <aside id="sidenav-2" class="sidenav sidenav-fixed custom-sidenav">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </aside>
  <!-- Main Content -->
  <div class="container">
    <h1>Content</h1>
  </div>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <!-- jQuery Inline-->
  <script>
    $(document).ready(function() {
      $('.sidenav').sidenav();
      $('#sidenav-1').sidenav({
        edge: 'left'
      });
      $('#sidenav-2').sidenav({
        edge: 'right'
      });
    });
  </script>
</body>

</html>

【问题讨论】：

标签： html jquery css materialize

【解决方案1】：

.custom-sidenav {
  top: 64px;
}

我知道我的回答迟了，但无论如何。这种风格将整个 sidenav 向下移动。要解决这个问题，您需要添加高度。所以应该是：

.custom-sidenav {
  top: 64px;
  height: 100%;
}

【讨论】：