Question

我正在编写一个在线聊天小部件，我打算将其设计为Facebook的。在我的页面中，底部固定了一个栏，每个聊天室都包含在该栏中。虽然酒吧的高度是固定的，但聊天室的高度不能超出酒吧。

有没有办法实现这个目标？我使用过z-index，！important和overflow，但都失败了。

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>

Answer 1

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

Answer 2

尝试添加此功能 #SNbar { 身高：25px; 最大高度：25px; }

Answer 3

如果我没有错，那么当你点击.CStitle时，你正在切换CS体。因此，为此，您可以设置相对于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;
}

希望这有帮助。

如何使用CSS覆盖父节点的高度？

3 个答案: