How can I have a scrollable body with fixed header and footer inside a container div?

Question

I have one container <div> with two children <div> elements inside of it. I want to place one child <div> at the top and other child <div> at the bottom of the container <div>. The middle part (the content) should scroll between the top and bottom child <div> elements.

I want both children <div> elements inside the container <div> to have a fixed position and the content should scroll without scrolling both top and bottom div.

I'd like a solution using CSS or jQuery, please. For a JSFiddle example, see my comment below.

Answer 1

This should be fairly straightforward. JSFiddle Example.

First, I put your loose div text inside a <p> element, and removed the default margin of that <p> element. Then, I changed the overflow: scroll; to overflow-y: scroll; and moved it to that new <p> element. Finally, I gave the <p> element an explicit height: 300px;, which is the height of the parent element, minus the height of the header and footer.

HTML:

<div class="outside">
    <div class="inside">inside1 Top should not scroll</div>
    <p>Your Text Here</p>
    <div class="inside2">inside 2 Bottom should not scroll</div>
</div>

CSS:

.outside {
    width: 400px;
    height: 400px;
    background-color: #EEE;
    border: 1px solid black;
}
.outside p {
    overflow-y: scroll;
    margin: 0;
    height: 300px;
}
.inside {
    border: 1px solid #000;
    background-color: #000;
    color: #FFF;
    height: 50px;
}
.inside2 {
    bottom: 2px;
    border: 1px solid #000;
    background-color: #000;
    color: #FFF;
    height: 50px;
}