时间戳

首页 > 解决方案 > 修复了使用弹性框的边聊菜单

html - 修复了使用弹性框的边聊菜单

问题描述

我会尽我所能展示我的问题，希望能找到解决方案。我正在创建一个角度应用程序。我有一个叫做聊天的组件。

它位于具有 100% 高度的 html 正文中。这是代码

.main-container-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.message-box-container {
  border: 1px solid red;
  overflow: scroll;
}

.message-box {
  text-align: left;
  padding-left: 5px;
  font-size: 13px;
}

.chat-container {
  height: 100%;
  width: 270px;
  display: flex;
  flex-direction: column;
  position: fixed;
  background-color: yellow;
  text-align: center;
  margin-left: 10px;
}

.chat-sub-container {
  flex: 1;
}
<div _ngcontent-c0="" class="chat-container">
  <div _ngcontent-c0="" class="chat-sub-container">
    <app-chat _ngcontent-c0="" _nghost-c1="">
      <div _ngcontent-c1="" class="main-container-chat">
        <div _ngcontent-c1="" class="message-box-container" id="message-box-container">
        </div>
        <div _ngcontent-c1="" class="chat-input"><input _ngcontent-c1="" class="ng-untouched ng-pristine ng-valid">
          <button _ngcontent-c1="">Send</button>
        </div>
        <div _ngcontent-c1="" class="chat-detail">
          <p _ngcontent-c1="">User count: 1</p>
        </div>
      </div>
    </app-chat>
  </div>
</div>

我知道 CSS 和 HTML 会变得有点混乱。但我希望这是可读的。

注意： - 使用 position:fixed，我可以将聊天组件固定在左侧。当我向下滚动时，聊天栏保持在正确的位置。- 主要问题是设置message-box-container时，发送按钮和用户计数 div 消失。无论浏览器高度如何，我只想让整个聊天栏保持在 100% 的高度。

无论浏览器高度如何，我只想让整个聊天栏保持 100% 的高度。

这是我目前拥有的...

当前的聊天风格

这就是我想要完成的。

所需的聊天风格

请注意，在第二张图片中，输入和发送按钮的区域位于底部。理想情况下，当用户降低浏览器高度时，这应该保持不变。唯一改变的是聊天消息的窗口。

我试图模仿 Twitch 在他们的聊天中所做的事情。我正在使用 Flex 容器。

编辑：

如果我添加到 message-box-container flex:1 或 flex-grow:1: 我的聊天框会发生这种情况：

弹性1

编辑:::: 以防万一，这里是整个网站的更好的完整范围。这又是有角度的。聊天框是它自己的组件。

全屏示例

编辑 - - - - - - - - - - - - - - - - - - - - - - - - - -------------------------------------------------- ----------------------

如果您检查我问题中的最后一张照片。您会注意到聊天框上方还有其他内容。将 .chat-c​​ontainer 更改为 82% 修复了将 Flex:1 添加到 message-box-container 导致输入框消失的问题。更改高度百分比解决了这个问题。

但是现在的问题是聊天框动态展开，但是在最小化屏幕的时候并没有缩小

标签： htmlcssflexbox

解决方案

您只需要设置flex-grow: 1on .message-box-container，允许它扩展以填充可用空间。另请注意，您可能还希望删除overflow: scroll以更好地匹配您的设计。

.main-container-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.message-box-container {
  border: 1px solid red;
  /* overflow: scroll; */
  flex-grow: 1;
}

.message-box {
  text-align: left;
  padding-left: 5px;
  font-size: 13px;
}

.chat-container {
  height: 100%;
  width: 270px;
  display: flex;
  flex-direction: column;
  position: fixed;
  background-color: yellow;
  text-align: center;
  margin-left: 10px;
}

.chat-sub-container {
  flex: 1;
}
<div _ngcontent-c0="" class="chat-container">
  <div _ngcontent-c0="" class="chat-sub-container">
    <app-chat _ngcontent-c0="" _nghost-c1="">
      <div _ngcontent-c1="" class="main-container-chat">
        <div _ngcontent-c1="" class="message-box-container" id="message-box-container">
        </div>
        <div _ngcontent-c1="" class="chat-input"><input _ngcontent-c1="" class="ng-untouched ng-pristine ng-valid">
          <button _ngcontent-c1="">Send</button>
        </div>
        <div _ngcontent-c1="" class="chat-detail">
          <p _ngcontent-c1="">User count: 1</p>
        </div>
      </div>
    </app-chat>
  </div>
</div>

推荐阅读