我正在尝试创建一个基于HTML / CSS的简单聊天UI,其中有三个垂直div:标题,聊天和发送栏。

html - “中间” div如何滚动,并且仍然像UI一样响应“聊天”?-LMLPHP

如果我有三个div,那么中间div如何成为完整的“中间”高度,并且仍可滚动以滚动消息?如果将发送栏div设置为静态高度,则可以执行此操作,但是如果我希望它可以增长,则该方法不起作用。

有谁知道如何使用css来创建响应式的类似聊天的UI,以使中间内容可滚动并且发送栏内容可增长?

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

这是我看到的问题的代码示例:(a)较低的div不粘在视图上,(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>

最佳答案

在这里,wrapper的绝对定位不是必需的。同样为height: 100%指定middle不会*填充topmiddle剩余的剩余空间。


将flexbox的高度设置为视口高度,以便flexbox知道需要拉伸到的高度,
在中间部分添加flex: 1以填充剩余的空间(您可以参考this answer来查看其简单演示),
overflow: auto添加到middle部分-请注意,除可见值或将overflow重置为零以外的min-height值将覆盖列flexbox的默认min-height: auto。 -在此处阅读更多详细信息:Why don't flex items shrink past content size?
(请参阅此行为herehere的一些示例。)
还要在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>

09-16 16:21
查看更多