mcv mcv - 1 month ago 5
CSS Question

CSS: How to prevent contents of scrollable div from appearing behind a fixed div

Got a message_container div which has a fixed scrollable message_header div and a scrollable message_body div. Issue I am having is that the contents of message_body div is/was located behind the fixed div. How can I fix this?

EDIT: I made modifications, I now have an overflowing message_header div and a message_body div. The message_header is great, the message_body looks okay, but I still don't want to have it scrolling up behind the message_header div. How do I correct this? Just to be clear, this code is located in a modal window, I didn't include that cause I didn't feel that it was necessary to solve my problem.

I have the issue duplicated at jsfiddle. I made the first content entry longer which appears behind the header div, and is seen when you scroll. I wanted the contents to start beneath the fixed header div, not behind it.

CSS Snippet:

.message_container{
width=600px;
height=395;
}

.message_header{
padding-bottom: 5px;
font-size: 14px;
position: fixed;
width:500px;
height:50px;
background-color: lightgrey;
overflow-y:auto;
}

.message_body{
overflow-y:auto;
padding-top:50px;
}


HTML snippet:

<div class="message_container">
<div class="message_header">
<p> test </p>
<p> test </p>
<p> test </p>
<p> test </p>
</div>
<div class="message_body">
<p>content is longer</p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
</div>
</div>


Edit: How can people down vote without giving a reliable answer? I think this down voting thing needs to be questioned. I have searched the site. I have played with this issue long enough. I am here asking for assistance. Thank you.

Edit: renamed css classes to be less generic.

Solution:

As provided by @Pete below. The message_body div and the message_head div lacked definition of their widths and heights even thought the message_container was (later) defined with a weight and height. I updated my example and here is the link : http://jsfiddle.net/kcfTc/59/

The CSS snippet is:

.message_container{
width=600px;
height=395;
position: relative; //new
}

.message_header{
padding-bottom: 5px;
font-size: 14px;
position: fixed;
width:600px; //new
height:50px; //new
background-color: white; //modified
overflow-y:auto;
}

.message_body{
overflow-y:auto;
top:55px; //new
bottom:0; //new
left:0; right:0; //new
width: 100%; //new
position: absolute;//new
}

mcv mcv
Answer

As provided by @Pete below. The message_body div and the message_head div lacked definition of their widths and heights even thought the message_container was (later) defined with a weight and height. I updated my example and here is the link :

http://jsfiddle.net/kcfTc/59/

The CSS snippet is:

.message_container{
    width=600px;
    height=395;
    position: relative; //new
}

.message_header{
    padding-bottom: 5px;
    font-size: 14px;
    position: fixed;
    width:600px;  //new
    height:50px;  //new
    background-color: white;  //modified
    overflow-y:auto;
}

.message_body{
    overflow-y:auto;
    top:55px;        //new
    bottom:0;        //new
    left:0; right:0; //new
    width: 100%;     //new
    position: absolute;//new
}
Comments