How to override the height of parent node using CSS? - html

Question

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:
#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 for the inner container is what you want. Then you can put it anywhere you want. Best is probably to set position:relative to the parent container, so that the position of the inner containers will using the parent as "base".

Answer 2

If I am not wrong, from this when you click on .CStitle, you are toggling the CSbody. So for this, you can set position relative to chatSession class and to the CSbody, give position absolute.
.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;
}
Hope this helps.

Answer 3

try adding this
#SNbar {
height: 25px;
max-height: 25px;
}