将元素保留在div的底部，同时将其保持在流中

Question

我希望将一个元素保留在侧边栏的底部。为实现这一目标，最简单的解决方案之一是：

  #container
  {
    position: relative;
    height: 100%;
  }

  #bottom-element
  {
    position: absolute;
    height: 20px;
    bottom: 0;
  }

此代码的结果将是：

但是，我还需要保持侧边栏的响应性。由于absolute position从流中移除#bottom-element，如果侧边栏的高度变得太小，#bottom-element将覆盖蓝色元素，而不是创建滚动条

所以我的问题是：
如何将红色元素保留在侧边栏的底部，同时当侧边栏不够高时将其保留在蓝色元素列表的底部？

Answer 1

只需在容器中添加一些底部填充，等于绝对定位元素的高度：

 #container
  {
    position: relative;
    height: 100%;
    padding-bottom:20px;
    box-sizing: border-box;
  }

  #bottom-element
  {
    position: absolute;
    height: 20px;
    bottom: 0;
  }

更新您可能还想添加box-sizing: border-box以停止将填充添加到100％高度。我用这个更新了CSS。