Absolute bottom position in scroll div?

Issue

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.

Solution

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

Answered By - Alvaro Menéndez