html - 将栏粘贴到容器的页脚

Question

在此Fiddle ，即使用户滚动容器，我也试图将栏始终保持在左下角。目前，如果我滚动容器，栏会移动，而不是总是粘在页脚上。

虽然这似乎是默认行为，但我并没有意识到这一点。所以，任何解释都会很有帮助。 (我的预期是它会粘在容器底部)。

需要考虑的事项:

• 当水平调整大小时，该条应该超过容器的水平滚动条。 (当前正在发生)
• 栏应始终位于容器的底部。 (没有发生)

.parent {
  width: 60%;
  height: 300px;
  position: absolute;
  background-color: tomato;
  overflow: auto;
}
.content {
  height: 18000px;
  width: 300px;
  background-color: firebrick;
}
.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 20px;
  text-align: center;
  width: 50px;
  height: 20px;
  background-color: beige;
}

<div class="parent">
  <div class="content"></div>
  <div class="bar">BAR</div>
</div>

Answer 1

试试这个 CSS

.grand-parent{
  position: relative;

}
.parent {
  width: 60%;
  height: 300px;
  overflow: auto;
  background-color: tomato; 
}
.content {
  height: 18000px;
  width: 300px;
  background-color: firebrick;
}
.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 20px;
  text-align: center;
  width: 50px;
  height: 20px;
  background-color: beige;
}

HTML

<div class="grand-parent">
  <div class="parent">
    <div class="content"></div>
  </div>
  <div class="bar">BAR</div>
</div>