Absolute bottom position in scrolling div?

Question

Fiddle

I want to snap my buttons to the bottom of the container to use:

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

This is normal when there is not enough content (pink div in the violin), but when there is a lot of content (orange div in the violin), the container scrolls and the buttons are not at the bottom of the container.

How to do this so that the buttons are at the bottom of the container when it does not 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

You should add height:100% in html and body, and then min-height:100% in your container like this (I added a few 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 FIDDLE

(add more content to check it out)

EDITED (fixed height) The same concept just adds another container to use min-height

NEW FIDDLE

Answer 2

I added a .inner container with a minimum height. If there is little content, then the .inner container will push your buttons to the bottom. If the contents are larger, then the .inner container will grow together.

 .inner { min-height: 149px; } 

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

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