Question

我将竭尽所能展示我的问题，以期找到解决方案。我正在创建一个有角度的应用程序。我有一个称为聊天的组件。

它位于具有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％的高度，而不管浏览器的高度如何。

这是我目前拥有的...

current chat style

这就是我想要实现的目标。

chat style desired

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

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

编辑：

如果我添加到消息框容器flex：1或flex-grow：1：这发生在我的聊天框中：

flex1

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

fullscreenofexample

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

如果您查看我的问题中的最后一张照片。您会注意到聊天框上方还有其他内容。将.chat-container更改为82％可以解决以下问题：将Flex：1添加到message-box-container会导致输入框消失。更改高度百分比可以解决此问题。

但是现在的问题是聊天框可以动态扩展，但是在最小化屏幕时它不会收缩

Answer 1

您只需要在.message-box-container上设置flex-grow: 1，使其扩展以填充可用空间。另外请注意，您可能还希望删除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>

Answer 2

我必须修改您的布局，但这是您要寻找的吗？ http://jsfiddle.net/9mn1aueL/2/

.main-container-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.message-box-container {
  border: 1px solid red;
  /* overflow: scroll; */
  flex: 1 0 auto;
}

.message-box {
  text-align: left;
  padding-left: 5px;
  font-size: 13px;
}

.chat-container {
  height: 100%;
  width: 270px;
  position: fixed;
  background-color: yellow;
  text-align: center;
  margin-left: 10px;
}

<div class="chat-container">
  <app-chat>
    <div class="main-container-chat">
      <div class="message-box-container" id="message-box-container">
      </div>
      <div class="chat-input">
        <input class="ng-untouched ng-pristine ng-valid">
        <button>Send</button>
      </div>
      <div class="chat-detail">
        <p>User count: 1</p>
      </div>
    </div>
  </app-chat>
</div>

使用弹性框的固定侧面聊天菜单

2 个答案: