html - "middle"div 如何可以滚动，并且仍然像 UI 一样响应类似于 "chat"？

Question

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

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

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

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

这是我遇到的问题的代码示例:(a) 下方的 div 不粘在 View 上，(b) 中间的 div 不可滚动。

参见 fiddle和片段:

.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

您的包装器 的绝对定位 在这里并不是真正必要的。同时为 middle 指定 height: 100% 不会*填充 top 和 middle 留下的剩余空间>.

• 将 flexbox 的高度设置为视口(viewport)高度，以便 flexbox 知道它需要拉伸(stretch)到的高度，

• 在中间部分添加 flex: 1 以填充剩余空间(您可以引用 this answer 看一个简单的演示)，

• 将 overflow: auto 添加到 middle 部分 - 请注意 overflow 值不是可见或重置 min- height 为零将覆盖列 flexbox 的默认 min-height: auto。 - 在此处阅读更多详细信息:Why don't flex items shrink past content size? (查看此行为的一些示例 here 和 here。)

• 还将 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>