我正在尝试创建一个基于HTML / CSS的简单聊天UI,其中有三个垂直div:标题,聊天和发送栏。
如果我有三个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
不会*填充top
和middle
剩余的剩余空间。
将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?
(请参阅此行为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>