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

时间:2017-12-20 01:59:37

标签: twitter-bootstrap position collapse

我正在尝试创建一个小型聊天客户端以插入我的网站,并且无法将已折叠的div与其底部的div对齐。< / p>

我有一个div,其中有两个聊天窗口(也是div s) - 默认情况下两个窗口都已最大化。

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

当两者都被最小化时,它可以根据需要工作,页面底部有两个最小化条。

我粘贴图片,但我是stackoverflow的新手,无法发布图片。

当内部的另一个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>

欢迎任何和所有建议。

提前致谢。

2 个答案:

答案 0 :(得分:1)

只需在第二个.chatblah div中添加一个修复类,然后使用此css

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

以下是屏幕截图http://prntscr.com/hpz073

答案 1 :(得分:0)

您可以使用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;
}