jQuery底部固定div切换向上移动所有div
我正在与节点JS和我们build立一个完美的聊天，现在我们正在移动到它的CSS部分。
现在我现在遇到的问题是，当我们有多个选项卡，并且只点击一个选项卡时，所有的选项卡都会向上移动。
这可以在下面的图像中查看。 红色区域是标签所显示的div ，它们应该可以通过CSS向下移动
之前
点击1个标签后
再次点击一个标签，告诉你我有正确的jQuery部分
这是一个坐在页面底部的固定div
下面的代码对每个选项卡都重复，但是使用不同的ID，如图所示的tramsTalk ， Calvin ， srcc-test 。
<div style="position:fixed;bottom:0;right:26px;background-color:red;"> <div id="tramsTalk_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right"> <div id="tramsTalk_chat_header" class="chat_header"><p><i class="icon-chevron-up icon-white pull-right"></i>tramsTalk</p></div> <div class="overflow_chat" id="tramsTalk_chat_textarea"><hr style="margin-top:-8px;margin-bottom:1px;"></div> <div class="chat_textarea_holder" id="tramsTalk_msg_textarea_holder"><textarea class="chat_box" rows="3" id="tramsTalk_msg" ignoreesc="true" name="tramsTalk_chat_message" onkeyup="check(this,event);" style="resize: none; overflow-y: hidden; "></textarea></div> </div> </div>
我认为这将工作，它仍然保持顶部的标签。
只是为了重申：
jQuery工作正常，我们切换，但移动标签应该仍然被固定在底部。 （我可以点击它们，然后他们将拉下文本框）。 我认为CSS是问题，我不确定。
解
<style> .wrappers > div { margin-top: 275px; } .active { height: 300px; background-color: white; margin-top: 0 !important; } </style> <script type="text/javascript"> $(document).ready(function(){ $('#Calvin_chat').click(function(){ alert('test'); $(this).attr('class','active'); });}); </script>
奇迹般有效！！！
虽然你声明“下面的代码是重复每个标签，但不同的ID”，并给这个：
<div style="position:fixed;bottom:0;right:26px;background-color:red;"> <div id="tramsTalk_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right"> <div id="tramsTalk_chat_header" class="chat_header"><p><i class="icon-chevron-up icon-white pull-right"></i>tramsTalk</p></div> <div class="overflow_chat" id="tramsTalk_chat_textarea"><hr style="margin-top:-8px;margin-bottom:1px;"></div> <div class="chat_textarea_holder" id="tramsTalk_msg_textarea_holder"><textarea class="chat_box" rows="3" id="tramsTalk_msg" ignoreesc="true" name="tramsTalk_chat_message" onkeyup="check(this,event);" style="resize: none; overflow-y: hidden; "></textarea></div> </div> </div>
我的猜测是，根据我从你的图像和你所说的行为中看到的 ，你确实有这个（为了说明，我已经消除了胆量）：
<div style="position:fixed;bottom:0;right:26px;background-color:red;"> <div id="tramsTalk_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right"> </div> <div id="sccr_test_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right"> </div> <div id="Calvin_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right"> </div> </div>
也就是说， fixed位置div并不是每个都重复的，而是实际上将它们全部包裹起来。 如果是这样，那么你所经历的行为就是我所期待的，因为一旦一个选项卡被放大，那么固定格的高度就会扩大，所有的标题就会随之增加。 你从这样的事情开始 （为了说明的目的，我缩小了宽度）。 你点击并展开一个高度， 得到像这样的东西 。 解决这个问题的一种方法是在div上设置em单位高度，同样也可以用扩大后的大小来设置，这样就可以像这样控制margin-top 。
我在这里假设你的fixed div并不是真的会有一个红色的背景，但实际上是透明的（红色是为了说明）。 如果不是这样，那么你需要将每个元素分别fixed一个fixed位置，但是这样你就不能将它们float 。
我认为你不需要调整在任何一个子选项卡上的定位，因为它们的位置可以由定位的持有div决定。（或者至less把一个vertical-align: bottom在每个子选项卡/窗口/聊天框）
所以你会有这样的东西：
<div style="position: fixed; bottom: 0; right: 26px; background-color:red"> <div id="tramsTalk_chat" style="vertical-align: bottom"> </div> <div id="sccr_test_chat" style="vertical-align: bottom"> </div> <div id="Calvin_chat" style="vertical-align: bottom"> </div> </div>