将 Div 容器与 Display Flex 的底部对齐答案

【问题标题】：Align Div Container to the Bottom of a Display Flex将 Div 容器与 Display Flex 的底部对齐
【发布时间】：2018-02-17 03:09:45
【问题描述】：

我必须为聊天构建一个模块化窗口！我已经得到了一个工具栏和一个填充的 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 的大小动态移动！

我必须如何以及在哪里将对齐设置为底部？

【问题讨论】：

类似position:absolute; bottom: 0px; 但没有你的css代码就不能确定
scss 对 div 的定位没有任何作用，我已经检查过了！

标签： javascript jquery html css flexbox

【解决方案1】：

第一点：不要在没有必要的情况下使用内联 CSS。

您可以通过定位将您的信息置于底部。尝试如下更改您的代码

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

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

【讨论】：

现在它在底部但在消息 div 的前面。这意味着它在一些现在不可读的消息前面。那我在哪里可以改变呢？
在这种情况下，将padding-bottom 设置为您的relative 定位的div。 padding-bottom 应该与您消息的高度相同
嗯，这不会改变任何东西
正如我在回答中设置的那样，尝试增加相对位置 div 的高度，然后设置 padding-bottom。即使它没有帮助然后分享一个提琴手来调查它。
关于您的回答，我没有更改相对 div，但我将 <div style="background-color: #e6e6e6; flex-grow: 1; overflow-y: scroll; padding-bottom: 10px"> 更改为 12% 的 padding-bottom，这是消息输入 div 的百分比，这就成功了！再次感谢！ ^^

【解决方案2】：

只需在您的 textarea 或 textarea 容器中添加 position: absolute; 和 bottom: 0px;

【讨论】：

只有这样还不足以提供预期的结果。正如 Rajesh 所提到的，还需要 position:relative;。

【解决方案3】：

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

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

【讨论】：