Question

从表面上看问题似乎很基本。我有一个侧面板。在那个侧面板中，我希望有两个单独的面板堆叠在一起，包含3个div。两个包含的div将具有固定的高度，并且永远不会超过固定的高度。第三个div具有可变数量的元素，如果它超过列的高度，我希望它是可滚动的。两个顶层面板不应像现在一样超过窗口的高度。

我的麻烦在于将屏幕高度均匀分布到两个顶层面板，并在必要时在列表中设置滚动条（#sistack，＃threads）。

当然，您有一个列表比另一个更长的场景，在这种情况下，您希望更长的空间占用大部分空间。到目前为止，我有以下代码：

＆＃13;

#column {
  float: right;
  width: 250px;
  max-width: 250px;
  height: 100%;
}

#debug {
  display: flex;
  height: inherit;
  flex-direction: column;
}

#debug>div {
  background-color: #eee;
  border: 1px solid black;
  box-sizing: border-box;
}

#sistack div,
#threads div {
  display: block;
  height: 30px;
  width: 100%;
}

#sistack,
#threads {
  min-height: 60px;
}

.toolbar {
  height: 50px;
  background-color: blue;
  width: 100%;
}

＆＃13;

<div id=column>
  <div id=debug>
    <div>
      <span>Hello Sir</span>
      <div class=toolbar></div>
      <div id=sistack>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
      </div>
    </div>
    <div>
      <span>Threads</span>
      <div class=toolbar></div>
      <div id=threads>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

我希望我解释得很好，感谢先进的任何帮助：）

Answer 1

我不确定我是否得到你的观点但是为了拥有一个滚动div，你需要使用一个固定高度并添加一个overflow-y或x来滚动。

#sistack,#threads{
    height:60px;
    overflow-y: scroll;
}

使用带有滚动div的flex容器

1 个答案: