Search code examples
htmlcsspositioning

Fixing a child div within its parent regardless of overflow

I am attempting to make a child div sit fixed at the bottom of its parent div relative to the "div window"; i.e. I want the child div to remain fixed at the bottom of the div whether or not the user scrolls.

When there is no content overflow, I am able to accomplish this goal using:

HTML:

<div id="outer">
    <div id="inner"></div>
</div>

CSS:

#outer {
    position: relative;
    overflow-y: scroll;
    color: red;
}

#inner {
    bottom: 0;
    position: absolute;
    color: blue;
}

The result is this:

Image with no problem

I run into a problem when the content of #outer overflows and the user scrolls:

Overflow using breaks

JS Fiddle of Image #2 (overflow using <br>).

Herein lies my problem: I want #inner (the blue box) to remain fixed at the bottom of #outer (the red box) regardless of scroll -- an effect similar to using position:fixed on a div that has height:100%. But I want to achieve the effect using a div that has a set height that is not 100%.

I feel like there is a very simple solution to this, but I cannot figure it out.

Solution

  • If you add a second outter <div> you can position absolutely within that element instead of the scrolling <div>, if the #outter div is statically positioned: http://jsfiddle.net/Kgf8a/1/

    Alternatively, you could look into using position:sticky: http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

    But I don't know what kind of browser support you'll get for that.