Question

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

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

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

如果按钮位于容器的底部，当它没有很多内容并且它们位于滚动的底部（内容下方）时有很多内容我怎么能拥有它？内容。

Answer 1

我添加了一个具有最小高度的.inner容器。如果那里的内容很少，那么.inner容器会将按钮推到底部。如果内容更多，则.inner容器将随之增长。

.inner {
    min-height: 149px;
}

另请注意，按钮具有相对位置而非绝对位置。当一个元素是绝对的时，它不会对页面内容做出反应。

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

Answer 2

您必须将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

（添加更多内容以查看）

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

<强> NEW FIDDLE

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

2 个答案: