Position absolute bottom + scroll fix

Question

I have the following element:

Where the "1 comment" button container is positioned absolute to the main container which is relative positioned. There problem is when I resize it and scroll down, the "1 comment" button container is going up few px. I want it to keep it in the bottom. Like a sticky footer positioned fixed to the main container. I wouldn't want to use javascript for this.

You can see the code live, here.

Answer 1

Place all content in a div with:

overflow: scroll;

and put the footer outside the div with:

position: absolute; bottom: 0; width: 100%; margin: 0; padding: 0;

Answer 2

You just need to put the .subtitle_box outside of your #container

You could use a wrapper to have some basic style like the madding, text-align.

Answer 3

You should put everything in the container except the subtitle_box bottom inside a different container.

Then set the overflow-y on the different container, with a absolute position, and a bottom offset of the height of the subtitle_box bottom.

Something like this

<div id="container">
    <div class="inner-container">
        <div class="title_box">
                <h1>Default Project</h1>

            <p>September 29 2015</p>
        </div>
        <div class="subtitle_box high">
                <h2>Incomplete work</h2>

        </div>
        <div class="subtitle_box dark">
            <button class="btn btn_toggle"></button>
                <h2>Task 1</h2>

            <button class="btn btn_menu"></button>
        </div>
        <div class="subtitle_box">
            <button class="btn btn_toggle"></button>
                <h2>Goal</h2>

        </div>
        <div class="text_box">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="subtitle_box">
            <button class="btn btn_toggle"></button>
                <h2>Involved in this task</h2>

        </div>
        <div class="extra_box">
            <div class="contact_box">
                <button class="btn btn_toggle"></button>
                <p class="bold">Samuel Rush</p> <span class="dot"></span>

                <p>Strive Technologies</p>
                <button class="btn right">Contact</button>
            </div>
            <div class="skills_box">
                <p>PHP,CSS,Joomla,MySQL,JavaScript,HTML5</p>
            </div>
        </div>
    </div>
    <div class="subtitle_box bottom">
        <button class="btn comment">1 Comment</button>
    </div>
</div>

And then add the following css

.inner-container {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:25px;
    overflow-y:auto;
}

.bottom {
    height:25px;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:0;
}

See http://jsfiddle.net/yhgsddcz/1/

Answer 4

remove position: relative from #container that wrap your comment box, .subtitle_box bottom will be relative to #pane instead.it work like a charm. Congratulation !!!