Absolute bottom position in scroll div?

Question

Fiddle

I wish to align my buttons to the base of the container so I use:

.buttons{
    position: absolute;
    bottom: 0;
}

This is fine for when there is not much content (the pink div in the fiddle), but when there is a lot of content (the orange div in the fiddle), the container scrolls and the buttons are not at the bottom of the container.

How can I have it so that the buttons are at the bottom of the container when it doesn't have a lot of content and they are at the bottom of the scroll (below the content) when there is a lot of content.

Answer 1

I added an .inner container that has a min-height. If the content in there is low, then the .inner container will push your buttons to the bottom. If the content is more, then the .inner container will grow along.

.inner {
    min-height: 149px;
}

Also note that the buttons have a position relative instead of absolute. When an element is absolute, it does not react to the page contents.

https://jsfiddle.net/76gbfrah/10/

Answer 2

You have to add height:100%to html and body and then min-height:100%to your container like this (I have added a few more lines to make it look better):

body, html {height:100%; margin:0;}

* {box-sizing: border-box;}
.container{
    min-height: 100%;
  position: relative;
    padding-bottom:30px;
}
p {margin:0;}

.buttons{
    position: absolute;
    bottom:0;
}

.pink{
    background: pink;
}

.tomato{
    background: tomato;
}

Here you have the FIDDLE

(add more content to check it out)

EDITED (fixed height) Same concept just adding another container to use the min-height

NEW FIDDLE