Question

我目前正在尝试制作侧边栏布局。我觉得我几乎就在那里，但最后一点不起作用。

＆＃13;

html,body {
  width: 100%;
  height: 100%;
}

#wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

.sidebar {
  height: 100%;
  position: fixed;
  width: 200px;
  background: red;
  overflow: auto;
  flex-direction: column;
  display: flex;
}

ul {
  padding: 0;
  margin: 0;
}

.menu {
  flex: 1;
  background: rgb(150,0,0);
}

.users {
   overflow: auto;
   max-height: 240px;
   min-height: 100px;
}

＆＃13;

<div id="wrapper">
  <div class="sidebar">
    <ul class="menu">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
    </ul>
    <ul class="users">
      <li>user 1</li>
      <li>user 2</li>
      <li>user 3</li>
    </ul>
  </div>
  <div class="content">
    
  </div>
</div>

＆＃13;

这是布局的一个小提琴，它比上面的代码段更适合查看问题： https://jsfiddle.net/ybp4og8w/1/

除非窗口的高度非常小，小于菜单项列表，否则一切都很好用。屏幕底部的内容消失。理想情况下，我希望用户列表在底部是粘性的（现在这是正确的，但是在处理代码时我也遇到了这个问题），当高度变小但不重叠菜单项但是而是让侧边栏变得可滚动。

有关如何实现这一目标的任何提示？

Answer 1

我看到您的 jsfiddle 并在#sidebar

中应用此代码

overflow-y:scroll;

可能会有所帮助。

谢谢！

Flexbox元素不滚动溢出

1 个答案: