將 Div 容器與 Display 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 的大小！

我必須如何以及在哪里將對齊設置為底部？

Answer 1

第一點：不要在沒有任何必要的情況下使用內聯 CSS。

您可以通過定位將您的信息置於底部。 嘗試更改您的代碼如下

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

編輯：如果它沒有使您的消息准確到底部，那么您應該在<div style="height: 80%; display: flex; flex-direction: column;">在這部分上處理高度。

Answer 2

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

Answer 3

添加position: fixed; 和bottom:0; 到您的消息輸入容器，要修復寬度重疊問題，只需添加width: inherit;屬性width: inherit; 這將采用父元素的寬度值。 否則，您可以使用 JavaScript 代碼動態地將父寬度分配給您的消息容器：

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