Php 底部固定div的JQuery切换将所有div向上移动

我正在使用node JS，我们建立了一个聊天室，它工作得非常好，现在我们正在进入CSS部分

现在我遇到的问题是，当我们有多个标签，我们只点击一个，所有标签都会向上移动

这可以在下面的图像中查看。红色区域是选项卡所在的

div

，显示它们应该可以通过CSS向下移动

以前

单击1选项卡后

再次单击选项卡后，向您显示jQuery部分是正确的

这是一个固定的div，位于页面底部

以下代码针对每个选项卡重复，但ID不同，

tramstape

，

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>

.wrappers>div{
边缘顶部：275px；
}
.主动{
高度：300px；
背景色：白色；
页边距顶部：0！重要；
}
$（文档）.ready（函数（）{
$（“#Calvin_chat”）。单击（函数（）{
警报（“测试”）；
$（this.attr（'class'，'active'）；
});});

工作就像一个魅力

尽管您声明“以下代码对每个选项卡重复，但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>

电车杆

根据我从你的照片中看到的情况和你所说的行为，我猜你真的有这种能力（为了举例说明，我已经排除了胆量）：

也就是说，

fixed

positioned div不会对每个div重复，但实际上会将它们全部包装起来。如果是这样的话，那么您所经历的行为就是我所期望的，因为一旦一个选项卡被放大，那么固定div的高度就会扩展，所有标题都会随之上升。（为了便于说明，我缩小了宽度）。单击并展开“一”和“一”的高度。解决这个问题的一种方法是在div上设置一个

em

单位高度，同样也设置扩展的大小，这样您就可以控制

边距顶部

---

我在这里假设您的

fixed

div实际上不会有红色背景，但实际上会是透明的（红色用于说明）。如果不是这样，那么您需要将每个元素单独设置为一个固定的位置，但是您将无法浮动它们。

我认为您不需要调整固定div内任何子选项卡上的位置，因为它们的位置可以由固定div的位置决定。。（或者至少在每个子选项卡/窗口/聊天框上放置一个

垂直对齐：底部

）

所以你会有这样的想法：

<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>

所以这有点有效，出于某种原因，我可以静态地设置它，但在使用jquery添加类时，它仍然以相同的方式移动，当我得到更进一步的信息时，我会发布，但这是正确的答案。找出原因，我已经修复了css样式覆盖！重要的@user1212047——很高兴它成功了，而且您解决了特定的bug。

<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>