文章/答案/技术大牛

发布

社区首页 >问答首页 >无法将MaterializeCSS sidenav列表滚动到底部

问无法将MaterializeCSS sidenav列表滚动到底部
EN

Stack Overflow用户

提问于 2021-05-08 10:55:53

回答 1查看 59关注 0票数 1

我在这个网站上工作，将使用物化css框架。我已经构建了其中的一些，但仍然遇到了侧翼的问题。我已经解决了大部分问题，但我仍然无法滚动到sidenav列表的末尾。我已经添加了一些自定义样式，但我不认为这是干扰它。我不太确定哪里出了问题。运行代码并尝试将左侧的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

Stack Overflow用户

发布于 2021-08-31 11:44:56

.custom-sidenav {
  top: 64px;
}

我知道我的回答晚了，但不管怎样。这种风格会将整个sidenav向下移动。为了解决这个问题，你需要增加高度。所以它应该是：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67443661

复制

相似问题

问无法将MaterializeCSS sidenav列表滚动到底部
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将MaterializeCSS sidenav列表滚动到底部EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将MaterializeCSS sidenav列表滚动到底部
EN