我正在尝试创建一个小聊天客户端以插入我的网站，并且无法将折叠的div对齐到它的容器div的底部。
我有一个带有两个聊天窗口（也包括divs）的div - 默认情况下两个窗口都是最大化的。
当我最小化其中一个窗户时，面板向上坍塌，位于容器div的顶部。
当两者都被最小化时，它可以根据需要工作，页面底部的两个最小化条都可以。
我会粘贴图片，但我是stackoverflow的新手，无法发布图片。
当内部的另一个div未最小化时，如何将折叠的div强制到容器的底部？
这可以在这里看到：
这是代码：
<!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>
任何和所有建议最受欢迎。
提前致谢。
您可以使用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;
}
只需在第二个.chatblah div中添加一个类修复，然后使用这个css
.chatblah.fix {
position: absolute;
right: 290px;
}