底部对齐在另一个 div 内折叠 div

Question

我正在尝试创建一个小的聊天客户端以插入我的网站，但无法将折叠的 div 与其容器 div 的底部对齐。

我有一个 div，里面有两个聊天 windows（还有 divs）——默认情况下，两个 windows 都最大化了。

当我最小化其中一个 windows 时，面板向上折叠，位于容器的顶部 div。

当两者都最小化时，它会按预期工作，两个最小化栏都位于页面底部。

我会粘贴图片，但我是 Whosebug 的新手，不能 post 图片。

当其中的另一个 div 未最小化时，如何将折叠的 div 强制到容器底部？

可以在这里看到实际效果：

ChatTest

这是代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css" media="screen"></style>
    <script src="Scripts/chat.js"></script>
    <script src="Scripts/jquery-3.1.1.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.js"></script>

    <style>     

        .panel-resizable {
            resize: both;
            overflow: hidden;
        }

        .chat-container {
            bottom: 0;
            right: 0;
            position: fixed;
            /*height: 500px;*/
            max-height: 500px;
            /*border: 1px solid blue;*/
        }

        .chatblah {
            bottom: 0;
            /*position: fixed;*/
            float: right;
            margin-left: 0;
            right: 0;
            /*border: 1px solid green;*/
        }

        .chat-window {
            bottom: 0;
            float: right;
            margin-left: 10px;
            right: 10px;
            max-width: 280px;
            max-height: 500px;
            min-width: 280px;
            /*border: 1px solid red;*/
        }

            .chat-window > div > .panel {
                border-radius: 5px 5px 0 0;
            }

        .icon_minim {
            padding: 2px 10px;
        }

        .top-bar {
            background: #666;
            color: white;
            padding: 10px;
            position: relative;
            overflow: hidden;
        }
    </style>
</head>
<body>

        <div class="chat-container">
            <div class="chatblah">
                <div class="panel panel-warning table-responsive chat-window">
                    <div class="panel-heading top-bar">
                        <div class="col-md-8 col-xs-8">
                            <h3 class="panel-title">
                                <a data-toggle="collapse" href="#collapse_1">Fred</a>
                            </h3>
                        </div>
                        <div class="col-md-4 col-xs-4" style="text-align: right;">
                            <a data-toggle="collapse" href="#collapse_1"><span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span></a>
                            <a href="#"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>
                        </div>
                    </div>
                    <div id="collapse_1" class="panel-collapse collapse in">
                        <div class="panel-body panel-resizable">
                            <input type="hidden" id="txtChatID_1" value="1" />
                            <table style="width: 260px;">
                                <tbody>
                                    <!--Chat Message element-->
                                    <tr>
                                        <td style="width: 26px; vertical-align: top; border: 1px solid white">
                                            <img src="Images/defaultuser.png" style="width: 24px; height: 24px" />
                                        </td>
                                        <td style="background-color: #EDF5FC; border: 1px solid white">This is a test message that will go over a couple of lines.  The quick brown fox jumped over the lazy dog</td>
                                    </tr>
                                    <tr>
                                        <td class="text-right" colspan="2">
                                            <h5><small>You • 12:07am 19 Dec 2017</small></h5>
                                        </td>
                                    </tr>
                                    <!--End Chat Message element-->


                                    <!--Chat Message element-->
                                    <tr>
                                        <td style="width: 26px; vertical-align: top">
                                            <img src="Images/defaultuser.png" style="border: 1px solid white; width: 24px; height: 24px" />
                                        </td>
                                        <td style="background-color: #F2F2F2; border: 1px solid white">This is a response to that message</td>
                                    </tr>
                                    <tr>
                                        <td class="text-right" colspan="2">
                                            <h5><small>Joan • 12:09am 19 Dec 2017</small></h5>
                                        </td>
                                    </tr>
                                    <!--End Chat Message element-->




                                    <!--Message Input-->
                                    <tr>
                                        <td colspan="2">
                                            <textarea class="form-control chatInput" rows="3" id="txtMessage_1" placeholder="Type a message....."></textarea>
                                        </td>
                                    </tr>
                                    <!--End Message Input-->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="chatblah">
                <div class="panel panel-warning table-responsive chat-window">
                    <div class="panel-heading top-bar">
                        <div class="col-md-8 col-xs-8">
                            <h3 class="panel-title">
                                <a data-toggle="collapse" href="#collapse_2">Joan</a>
                            </h3>
                        </div>
                        <div class="col-md-4 col-xs-4" style="text-align: right;">
                            <a data-toggle="collapse" href="#collapse_2"><span id="minim_chat_window2" class="glyphicon glyphicon-minus icon_minim"></span></a>
                            <a href="#"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>
                        </div>
                    </div>
                    <div id="collapse_2" class="panel-collapse collapse in">
                        <div class="panel-body panel-resizable">
                            <input type="hidden" id="txtChatID_2" value="1" />
                            <table style="width: 260px;">
                                <tbody>
                                    <!--Chat Message element-->
                                    <tr>
                                        <td style="width: 26px; vertical-align: top; border: 1px solid white">
                                            <img src="Images/defaultuser.png" style="width: 24px; height: 24px" />
                                        </td>
                                        <td style="background-color: #EDF5FC; border: 1px solid white">This is a test message that will go over a couple of lines.  The quick brown fox jumped over the lazy dog</td>
                                    </tr>
                                    <tr>
                                        <td class="text-right" colspan="2">
                                            <h5><small>Fred • 12:07am 19 Dec 2017</small></h5>
                                        </td>
                                    </tr>
                                    <!--End Chat Message element-->


                                    <!--Chat Message element-->
                                    <tr>
                                        <td style="width: 26px; vertical-align: top">
                                            <img src="Images/defaultuser.png" style="border: 1px solid white; width: 24px; height: 24px" />
                                        </td>
                                        <td style="background-color: #F2F2F2; border: 1px solid white">This is a response to that message</td>
                                    </tr>
                                    <tr>
                                        <td class="text-right" colspan="2">
                                            <h5><small>You • 12:09am 19 Dec 2017</small></h5>
                                        </td>
                                    </tr>
                                    <!--End Chat Message element-->




                                    <!--Message Input-->
                                    <tr>
                                        <td colspan="2">
                                            <textarea class="form-control chatInput" rows="3" id="txtMessage_2" placeholder="Type a message....."></textarea>
                                        </td>
                                    </tr>
                                    <!--End Message Input-->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

欢迎提出任何建议。

提前致谢。

Answer 1

您可以使用 flexbox 并使用 flex-direction: column; 和 justify-content: flex-end; 将聊天元素底部对齐。

.chat-container {
    bottom: 0;
    right: 0;
    position: fixed;
    /* height: 500px; */
    max-height: 500px;
    /* border: 1px solid blue; */
    display: flex;
    flex-direction: row;
}

.chatblah {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}

Answer 2

只需将 class fix 添加到第二个 .chatblah div 然后使用此 css

.chatblah.fix {
    position: absolute;
    right: 290px;
}

这是截图http://prntscr.com/hpz073

底部对齐在另一个 div 内折叠 div

Bottom align collapsed div inside another div

position

collapse

twitter-bootstrap