Html CSS将div粘贴到引导列的底部

我正在开发一个有三列的模板——两列是列表，第三列是数据。我试图将前两个列表设置为可滚动的格式，然后将列表列的底部设置为按钮。我希望按钮总是固定在底部

我假设我必须为列表组添加某种固定高度，然后设置overflow-y:scroll以获得滚动外观，但是如何将列表底部的div设置为始终位于页面底部

我还包括了一个plunker：

谢谢你的帮助

例如，这是一列的外观：

   <div class="col-sm-3">
  <!-- this div to be a scrollable list -->
  <div class="list-group contact">
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
    <a href="javascript:void(0);" class="list-group-item">Items</a>
  </div>
  <!-- This div to be stuck at the bottom -->
  <div>
    <button class="btn btn-block btn-default">New</button>
  </div>
</div>

新的

您所需要做的就是为想要滚动的div添加一个固定高度，并允许在div上滚动

修改CSS以包含以下代码段，或将其在线添加到div中：

height:100px; overflow:scroll;

---

工作示例

好的，这就是我最初的假设和尝试。但是如果我加上``height:800px```，那么窗口滚动条仍然会滚动过按钮。我如何获得它，使底部的按钮div固定在列中窗口的底部，然后列表占据列的其余长度？也许这是对我的问题的一个更好的解释，你可以用

col-sm-3

class（）将样式添加到Div中吗？如果是这样，它应该被添加到包含您的列表的Div中。是的，对不起，我应该指定。我将它添加到包含列表的Div中，就像您的示例一样。但是，如果鼠标不在列表和页面的任何部分，它可以滚动。我怎样才能让按钮贴在窗口底部的div呢？我试着将列表的高度设置为身体的高度，但这也不起作用。还有其他想法吗