滚动div中的绝对底部位置？

Question

小提琴

我希望将我的按钮对齐到容器的底座,所以我使用:

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

当没有太多内容(小提琴中的粉色div)时,这很好,但是当有很多内容(小提琴中的橙色div)时,容器会滚动并且按钮不在容器的底部.

如果按钮位于容器的底部,当它没有大量内容时,如果内容很多,它们位于滚动的底部(内容下方),我怎么能拥有它呢？

Answer 1

您必须添加height:100%到 html 和 body，然后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;
}

这里有小提琴

（添加更多内容来查看）

编辑（固定高度） 相同的概念，只是添加另一个容器来使用min-height

新小提琴