html - CSSを使用して親ノードの高さをオーバーライドするにはどうすればよいですか？

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

内側のコンテナの position:absolute は、あなたが望むものです。その後、好きな場所に置くことができます。親コンテナに対して position:relative を設定して、内部コンテナの位置が親を「ベース」として使用するようにすることをお勧めします。

Answer 2

私が間違っていなければ、これから.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;
}

お役に立てれば。

Answer 3

この #SNbar { height: 25px; を追加してみてください。最大高さ: 25px; }