如何覆蓋使用CSS的父節點的高度？

我正在寫一個在線聊天窗口小部件，並計劃將其設計爲Facebook的。在我的頁面中，底部固定了一個酒吧，每個聊天室都包含在該酒吧中。雖然酒吧的身高是固定的，但聊天室無法在酒吧外擴展身高。如何覆蓋使用CSS的父節點的高度？

有沒有什麼方法可以達到這個目的？我已經使用了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>

來源

2012-10-05 user1722082

如果我沒有錯，從這個當你點擊.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-05 07:01:01

謝謝！現在CSbody可以按照我想要的方式進行擴展。但CStitle仍然堅持在那裏。我試圖在CStitle上進行絕對定位，但這會使聊天框重疊。我還添加了一個CStitle和CSbody的隱藏兄弟，但它也沒有幫助。 – user1722082

的位置是：絕對的內部容器是你想要的。然後你可以把它放在任何你想要的地方。最好的可能是設置位置：相對於父容器，以便內部容器的位置將使用父級作爲「基礎」。

來源

2012-10-05 06:49:30 Flo

此方法使chatbox擴展，但外部容器也擴展到內部高度。我想讓SNbar在高度固定的情況下粘在屏幕的底部，因此需要固定位置。 – user1722082

嘗試添加此 #SNbar { height：25px; max-height：25px; }

來源

2012-10-05 06:56:10

如何覆蓋使用CSS的父節點的高度？

回答

相關問題