1

我正在编写一个在线聊天小部件，并计划将其设计为 Facebook 的。在我的页面中，底部固定了一个栏，每个聊天室都包含在该栏中。虽然栏的高度是固定的，但聊天室不能将其高度扩展到栏之外。

有什么方法可以做到这一点吗？我使用过 z-index、!important 和溢出，但都失败了。

CSS：

#SNbar {    
    background-color: rgba(203, 203, 203, 0.80);
    position: fixed;
    bottom: 0;   
    width: 100%;
    height: 25px;
    z-index: 900;
    overflow: visible;   
}

#chatSessions { 
    position: relative;  
    bottom: 0;    
    float:right;
    z-index: 901;
}

.chatSession {
    /*
    position: fixed;  
    bottom: 0; 
    */ 
    padding: 0 10px 0 0;
    width: 260px;
    float: right;
    z-index: 999;
}

.CStitle {     
    height: 25px;   
    background-color:#3B5998;
    cursor: pointer;
}

.CStitle .titleText{
    text-decoration: none;  
    font-weight:bold;
    color: #FFFFFF;
    text-decoration: none; 
    line-height:2em;
}

.CSbody {
    background-color: #FFFFFF;
    opacity: 1.0;
    display: none;
    height: 0 !important;
}

.opened{
    min-height: 260px !important;
    display: block;
}

.CSMsgContainer {
    overflow-y: scroll;
    height: 210px;
}

HTML：

<div id="SNbar">      
    <div id="chatSessions">
        <div class="chatSession" id="Div4">
            <div class="CStitle" onclick="toggleChatSession(this)"><span class="titleText">Title (With Whom)</span> </div>
            <div class="CSbody">
                <div class="CSMsgContainer">
                    <div class="message">b: test1</div>
                    <div class="message">b: this is used to test css</div>
                    <div class="message">a: This may be help</div>
                </div>                  
            </div>
        </div>
        <div class="chatSession" id="Div8">
            <div class="CStitle" onclick="toggleChatSession(this)"><span class="titleText">Title (With Whom)</span></div>
            <div class="CSbody">
                <div class="CSMsgContainer">
                    <div id="Div9" class="message">d: hi C!!</div>
                    <div id="Div10" class="message">c: Hello D~~</div>
                    <div id="Div11" class="message">
                        c: We are the second chat session
                    </div>                  
                 </div>                   
            </div>
        </div>
    </div>       
</div>
4

3 回答 3

2

内部容器的位置：绝对是您想要的。然后你可以把它放在你想要的任何地方。最好的可能是设置位置：相对于父容器，以便内部容器的位置将以父容器为“基础”。

于 2012-10-05T06:49:30.357 回答
0

尝试添加这个 #SNbar { height: 25px; 最大高度：25px；}

于 2012-10-05T06:56:10.807 回答
0

如果我没记错的话，当您单击 .CStitle 时，您正在切换 CSbody。因此，为此，您可以设置相对于 chatSession 类和 CSbody 的位置，给出绝对位置。

.chatSession {
    position: relative;
    padding: 0 10px 0 0;
    width: 260px;
    float: right;
    z-index: 999;
}

.CStitle {     
    height: 25px;   
    background-color:#3B5998;
    cursor: pointer;
}


.CSbody {
    position:absolute;
    background-color: #FFFFFF;
    opacity: 1.0;
    display: none;
    height: 0;
    bottom:25px;
}

.opened{
    min-height: 260px;
    display: block;
}

.CSMsgContainer {
    overflow-y: scroll;
    height: 210px;
}

希望这可以帮助。

于 2012-10-05T07:01:01.237 回答