Абсолютное нижнее положение в прокрутке div?

Question

Fiddle

Я хочу, чтобы выровнять мои кнопки к основанию контейнера, поэтому я использую:

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

Это нормально, когда там не так много содержания (розовый ДИВ в скрипке), но когда есть много контента (оранжевый div в скрипке), прокрутка контейнера и кнопки не находятся в нижней части контейнера.

Как это сделать, чтобы кнопки находились внизу контейнера, когда у него нет большого количества контента, и они находятся внизу прокрутки (ниже содержимого), когда есть много содержание.

Answer 1

Вы должны добавить height:100% в HTML и тело, а затем min-height:100% в контейнере, как это (я добавил еще несколько строк, чтобы сделать его лучше выглядеть):

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; 
} 

Здесь у вас есть FIDDLE

(добавить больше контента, чтобы проверить его)

редактируется (фиксированная высота) 0 Та же концепцияпросто добавив еще один контейнер использовать min-height

NEW FIDDLE

Answer 2

Я добавил .inner контейнер, который имеет высоту мин. Если содержание там мало, то контейнер .inner будет нажимать ваши кнопки на дно. Если содержимое больше, то контейнер .inner будет расти вместе.

.inner { 
    min-height: 149px; 
} 

Также обратите внимание, что кнопки имеют относительное положение вместо абсолютного. Когда элемент является абсолютным, он не реагирует на содержимое страницы.

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