Question

我正在使用节点JS，我们建立了一个完美的聊天，现在我们正在转向它的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>

像魅力一样工作!!!

Answer 1

虽然你声明“下面的代码重复了每个标签但是有不同的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的高度会扩大，所有标题都会随之增加。 You start with something like this（为了说明，我缩小了宽度）。单击并展开一个高度get something like this。解决这个问题的一种方法是在div上设置em单位高度，同样使用扩展尺寸，这样您就可以控制margin-top like this。

我在这里假设你的fixed div并没有真正的红色背景，但事实上它将是透明的（红色是为了说明）。如果不是这样，那么您需要将每个元素单独设置为fixed位置，但之后您将无法float它们。

Answer 2

我认为您不需要调整保持div中任何子标签上的定位，因为它们的定位可以由保持div的定位决定。（或者至少放一个{{ 1}}在每个子标签/窗口/聊天框上）

所以你会有类似的东西：

vertical-align: bottom

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

2 个答案: