我试图创建一个小的聊天客户端插入我的网站，我有麻烦对齐一个折叠的div到它的容器div的底部。
我有一个div，其中有两个聊天窗口（也是div）-默认情况下，两个窗口都是最大化的。
当我最小化其中一个窗口时，面板向上折叠，位于容器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条答案
按热度按时间7xzttuei1#
只需在second.chatblah div中添加一个类fix，然后使用此css
这是http://prntscr.com/hpz073的屏幕截图
m0rkklqb2#
您可以使用flexbox和
flex-direction: column;和justify-content: flex-end;将聊天元素对齐到底部。