首页 文章

设置溢出以在固定div上滚动不起作用

提问于
浏览 次
1

溢出滚动不适用于固定div，这里是codepen demo

#side-navbar {
          overflow: scroll;
          position: fixed;
          min-height: 100vh;
          width: 6rem;
          float: left;
          background-color: #000;
          -webkit-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
          -moz-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
          box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
        } 

    #side-navbar .logo img {
      margin: 0.5rem;
      width: 5rem;
      height: auto;
    }

    #side-navbar .menu-container {
      overflow:visible;
      min-height: calc(100vh - 24.6rem);
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 100%;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
    }
    #side-navbar ul.social-menu {
      overflow: visible;
    }
</pre>
html css scroll overflow

2 回答

  • -1

    问题解决了 . 使用min-height可以使菜单永久渲染，但是当使用高度时，只有滚动才能完美地运行 .

    回复于
  • 0

    两件事：首先，尝试使用 height 而不是 min-height . 其次，使用 overflow-y:auto ，它的工作方式比 overflow:scroll 好 . 这是你的代码：

    #side-navbar {
          overflow-y: auto;
          position: fixed;
          height: 100vh;
          width: 6rem;
          float: left;
          background-color: #000;
          -webkit-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
          -moz-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
          box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
        }

    <div id="side-navbar">
<hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr>

</div>

    它适用于片段 . 在您的代码中尝试一下 . 如果您不想使用overflow-y auto，请确保使用 overflow-y:scroll .

    回复于

相关问题