“中间”div 如何可滚动，并且仍能像 UI 一样做出类似于“聊天”的响应？

Question

我正在尝试制作一个简单的基于 HTML/CSS 的聊天 UI，其中有三个垂直 div：Header、Chats和Send Bar。

如果我有三个divs，中间的 div 如何成为完整的“中间”高度，并且仍然可以滚动以滚动消息？如果我将发送栏 div 设置为静态高度，我可以做到这一点，但如果我希望它可增长，则该方法不起作用。

有谁知道如何使用 css 制作响应式聊天式 UI，使中间内容可滚动且发送栏内容可增长？

我认为这并不重要，但这是一个React应用程序。

这是我看到的问题的代码示例：(a) 下部 div 不粘在视图上，(b) 中间 div 不可滚动。

请参阅小提琴和片段：

.wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
}

.top {
	height: 10px;
	background: yellow;
}

.bottom {
	background: gray;
}

.middle {
	background: red;
	width: 100%;
	height: 100%;
}

<div class="wrapper">
  <div class="top">

  </div>
  <div class="middle">
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    
  </div>
  <div class="bottom">
    <p>
    some content
    </p>
  </div>
</div>

Answer 1

在这里，你的绝对定位wrapper并不是真正必要的。还指定height: 100%不*填充和middle留下的剩余空间。topmiddle

• 将 Flexbox 的高度设置为视口高度，以便 Flexbox 知道它需要拉伸到的高度，

• 添加flex: 1到中间部分以填充剩余空间（您可以参考this answer查看一个简单的演示），

• 添加overflow: auto到该middle部分 - 请注意，除可见或重置为零overflow之外的值将覆盖列弹性框的默认值。- 在这里阅读更多详细信息：为什么弹性项目不缩小超过内容大小？（请参阅此处和此处 此行为的一些示例。）min-heightmin-height: auto

• 还添加flex: 0 0 auto到bottom元素，以便在边缘情况下我们可以确保它在任何情况下都不会增长或收缩。

请参阅下面的演示：

body {
  margin: 0; /* reset default body margin */
}
.wrapper {
  height: 100vh; /* full viewport height */
  display: flex;
  flex-direction: column;
}

.top {
  background: yellow;
}

.bottom {
  background: gray;
  flex: 0 0 auto; /* don't grow or shrink in any case */
}

.middle {
  background: red;
  flex: 1; /* fill the remaining space */
  min-height: 0; /* optional */
  overflow: auto; /* overflow if exceeds available space */
}

<div class="wrapper">
  <div class="top">
    Header
  </div>
  <div class="middle">
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    
  </div>
  <div class="bottom">
    <p>
    some content
    </p>
  </div>
</div>