Fixed not scrollable footer inside div?

Question

I am making a small div in the center of the page that has a footer that is fixed, but the div has the ability to scroll.
In my opinion, there are two ways to do this:

• Using position:fixed : a fixed position actually works relative to the browser window, but I want a position relative to my small div
• Using position:absolute : Using bottom:0; I solved the problem first, but the footer scrolls with the text div.

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>​  <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 watch: JSfiddle

How to make the footer fixed for this div?

Answer 1

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

You create a wrapper for your window:

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

... you take width , margin and position:relative for #box :

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

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

One more thing: position: fixed does not apply to the parent, but to the browser window, so this is not the way to go.

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 described here: http://jsfiddle.net/6W5uq/29/

Basically, you create a footer at the bottom of the outer_base. I added margin to the content so that you can still see all this while scrolling down as well as the edge of the footer so that you can fully use the scroll bar.

Answer 3

Instead of using #footer, you need to make certain changes. Try the following:

In #footer add margin-top: 10px; instead of position: absolute; bottom: 0px;

Define this top edge with the height at which you want the footer below the "Some Texts" section. This is because the footer is set to the bottom of the div, but as more text appears and overflows, it sticks to the bottom of the div height, not the bottom of the content.