将Div容器与显示Flex的底部对齐

Question

我需要为聊天构建一个模块化窗口！我已经有了工具栏和填充的Flex容器。现在我遇到了一个问题，我想添加一个Div作为聊天输入字段。我尝试了几乎所有方法来将其对齐到底部，但都没有成功。

这是它应该看起来的样子：

"消息输入"必须对齐到底部

这是我的实际HTML代码：

<div id="chat_dialog" class="modal" style="height: 600px; overflow-y: hidden">
  <div class="toolbar_standard">
    <div class="toolbar_standard_control_row">
      <img src="/static/images/ic_arrow_back_white.svg" class="toolbar-button" data-bind="click: closeChatDialog">
      <div style="font-size: 20px; color: white">Chat</div>
      <div style="font-size: 20px; color: white; padding-left: 40%" data-bind="html: chatPartnerName"></div>
      <div style="..."></div>
    </div>
  </div>
  <div style="display:flex; height: 100%;">
    <div data-bind="foreach: contacts" style="width: 300px; overflow-y: scroll;">
      <div class="overviewlist_row waves-effect" style="padding-left: 5px; padding-right: 5px" data-bind="click: $parent.onClick.bind($parent)">
        <div>
          <div>
            <p data-bind="html: name"></p>
          </div>
        </div>
      </div>
    </div>
    <div style="background-color: #e6e6e6; flex-grow: 1; overflow-y: scroll; padding-bottom: 10px">
      <div style="height: 80%; display: flex; flex-direction: column;">
        <div id="spinner" class="spinner">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
        <div data-bind="foreach: messages" style="padding-left: 15px; min-height: 306px">
          <p data-bind="html: message, css: messageClassName"></p>
        </div>
        <div style="height: auto">
          <div class="input-field col s6" style="background-color: white; height: auto;">
            <input id="message_to_send" type="text" class="validate" data-bind="value: message_to_send" style="width: 94%;">
            <a id="sendChat" class="clickable-icon" data-bind="click: sendMessage" style="padding-top: 0px"><img src="/static/images/ic_send_black.svg"></a>
            <label for="message_to_send">Nachricht</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

以下是在浏览器中的效果:

您可以看到它在“消息”Div下方浮动，并且随着“消息”Div的大小动态移动!

我该如何在哪里设置底部对齐？

- Tim

---

类似于 position:absolute; bottom: 0px;，但如果没有您的 CSS 代码，就无法确定。 - Carsten Løvbo Andersen

scss 对 div 的定位没有任何影响，我已经检查过了！ - Tim

Answer 1

第一点：不要没有必要就使用内联CSS。

您可以通过定位将消息带到底部。尝试按以下方式更改您的代码：

在<div style="height: 80%; display: flex; flex-direction: column;">中添加position:relative，并在<div style="height: auto">中添加position:absolute; bottom:0;。

编辑：如果它没有将您的消息带到确切的底部，则应该在此部分上处理<div style="height: 80%; display: flex; flex-direction: column;">的高度。

- RaJesh RiJo

---

现在它在底部，但在消息div的前面。这意味着它在一些现在无法阅读的消息之前。那我在哪里可以更改呢？ - Tim

在这种情况下，将 padding-bottom 设置为您的相对定位的 div。padding-bottom 应该与您的消息高度相同。 - RaJesh RiJo

嗯，不知怎么回事，这并没有改变任何东西。 - Tim

尝试增加相对定位 div 的高度，然后设置 padding-bottom。如果仍然无法解决问题，请共享一个 Fiddler 以便进一步查看。 - RaJesh RiJo

关于你的回答，我没有改变相对的div，但是我将<div style="background-color: #e6e6e6; flex-grow: 1; overflow-y: scroll; padding-bottom: 10px"> 的padding-bottom改为了消息输入div的12％，这就解决了问题！再次感谢！^^ - Tim

Answer 2

只需在您的文本区域或文本区域容器中添加position: absolute;和bottom: 0px;

- Myco Claro

---

仅仅这样还不足以产生预期的结果。正如Rajesh所提到的，还需要一个position:relative;。 - Ovidiu Unguru

Answer 3

将 position: fixed; 和 bottom:0; 添加到您的消息输入容器中，为了解决宽度重叠问题，只需添加属性 width: inherit; 即可，该属性将获取父元素的宽度值。 否则，您可以使用 JavaScript 代码动态地将父元素的宽度分配给您的消息容器：

$(document).ready(()=> {
      var parentWidth = $('.parent-element').width();
      $('.message-container').width(parentWidth);
});

- Brahim SLIMANI