riveraparis
New Member
I'm writing an online chatting widget and I plan to design it as Facebook's.In my page, a bar is fixed on the bottom, and every chat rooms are contained in that bar.While the bar's height is fixed, the chat rooms cannot extend its height outside the bar.Is there any method to achieve this? I have used z-index, !important, and overflow, but all failed.CSS:\[code\]#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;}\[/code\]HTML:\[code\]<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>\[/code\]