html 仅向上扩展并以最大高度滚动的Div

dgenwo3n 于 12个月前发布在其他

关注(0)|答案(1)|浏览(92)

所以我用react写了一个前端，我有一个聊天窗口，看起来像这样，

<div id="outer-wrapper">
    <div className = "chat-window-wrapper">
        <div className="chat-window">
        <!-- chat messages go here -->
        </div>
        <div className="chat-window-textarea"></div>
    </div>

    <div id="element-below">
        <!-- other stuff -->
    </div>
</div>

字符串
在chat-window div内部，我使用react从一个可观察的消息数组中呈现消息，chat-window内部的每个消息看起来像这样：

<div>
        {messageStr}
    </div>

型
我根据react中的消息量计算chat-window-wrapper div的高度，它工作得很好，我有一个外部div可以扩展到的最大高度，这工作得很好。

我需要的chat-window-textarea保持锚定到底部，目前它坐在中间的消息有很多空的空间下面
我需要chat-window-wrapper只向上扩展，目前，如果我达到最大高度的窗口开始向下扩展，下面的元素被推离屏幕。我希望chat-window滚动，如果chat-window-wrapper达到最大高度

我正在合作一个更大的项目，所以我目前将outer-wrapper和element-below视为黑盒，但如果绝对必要，我可以更改这些元素上的css
我该如何使用css呢？我已经尝试了很多东西，如果需要的话，我可以发布我的janky css文件，但我想无论如何我都要从头开始。任何指导都很感激，即使只是一个小建议。
谢谢

Html

来源：https://stackoverflow.com/questions/77712519/div-that-expands-only-upwards-and-scrolls-at-max-height

1条答案

按热度按时间

sbtkgmzw1#

似乎你正在开发一个聊天应用程序，它显示从新到旧的消息，并有一个文本区域来编辑消息.对于你的问题：
1.使chat-window-textarea到底部：您可以在父元素chat-widnow-wrapper中使用flex布局并设置flex-direction: column，设置chat-window以占用其余空间;
1.使chat-window-wrapper向上扩展：使用flex和flex-direction：column-reverse;
中央统计局的统计数字如下：

.chat-window-wrapper {
    width: 100px; /* for demo */
    border: 1px solid #eaeaea; /* for demo */
    height: 100px;
    display: flex;
    flex-direction: column; /* Reverse column to make it expand upwards */
  }

  .chat-window {
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto; /* Enable vertical scroll if needed */
    flex: 1;
  }

字符串
演示：https://codepen.io/nxoglrnh-the-decoder/pen/eYXmWYW

赞(0）回复(0）举报 12个月前

我来回答

html 仅向上扩展并以最大高度滚动的Div

1条答案

相关问题

热门标签

最新问答