Fixed non scrolling footer inside a div?

Question

I am making a small div on the center of the page which has a footer which is fixed but the div is scroll-able.
According to me there are two ways to do it:

1. Using position:fixed : Fixed position actually work relative to the browser window but I want position relative to my small div
2. Using position:absolute : Using bottom:0; I solved the problem initially but the footer scroll with the div text.

HTML:

<div id="wrapper">
    <div id="box">
        <div id="header">
            <h1>Heading</h1>
        </div>
        <div id="content">
           Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text 
        </div>
        <div id="footer">
            <p>Fooooooooooooooooooooooooooter</p>            
        </div>
    </div>
</div>​

CSS:

#wrapper{
    width:600px;
    height:500px;    
    border:thin solid #c00;
}
#box {
    width:400px;
    height:300px;
    margin:100px auto;            
    border:medium dashed #c00;
    position:relative;    
    overflow:auto;
}
#content {
    background-color:rgba(0,0,208,0.1);   
}
#footer {
    position:absolute;
    bottom:0px;
    width:100%;
    height:50px;
    background-color:rgba(0,0,0,0.8);
    color:#fff;
}​

To See: JSfiddle

How to make the footer fixed for this div?

Answer 1

Solution: inside your outer #wrapper, create another wrapper for the #box - see http://jsfiddle.net/thebabydino/6W5uq/30/

You style your box wrapper:

.box-wrap {
    width:400px;
    height:300px;
    margin:100px auto;  
    position:relative;
}

... you take out the width, the margins and position:relative for the #box:

#box {
    height:300px;
    margin:0;
    border:medium dashed #c00;    
    overflow:auto;
}

... and you take into account the borders for the #box when positioning the #footer.

One more thing: position: fixed is not relative to a parent, but to the browser window, so it's not the way to go in this case.

Answer 2

<div id="wrapper">
    <div id='outer_box'>
        <div id="box">
            <div id="header">
                <h1>Heading</h1>
            </div>
            <div id="content">
               {text}
            </div>
        </div>
        <div id="footer">
            <p>Fooooooooooooooooooooooooooter</p>            
        </div>
    </div>
</div>​

Then add some styles to the elements, as documented here: http://jsfiddle.net/6W5uq/29/

Basically, you make the footer align to the bottom of the outer_box. I've added margin to the content, so you can still see all of it when scrolled down, and a margin to the footer so you can use the scroll bar fully.