侧栏中的粘性div

Question

我在侧边栏中有2个div，第二个（带有“bottom”类）应该粘到div的底部，我该怎么做？这是代码：

<div class="header"></div>
<div class="container">
  <div class="sidebar">
    <div class="top">topcontent</div>
    <div class="bottom">bottomcontent</div>
  </div>
  <div class="main"></div>
</div>
<div class="footer"></div> 

Answer 1

.sidebar{position:relative;}
.sidebar .bottom{position: absolute; bottom: 0;}

Answer 2

与@Chimoo相同，但意识到您需要添加底部填充或边距，以便.top不会与小型显示器上的.bottom重叠。

Answer 3

如果您将position:relative应用于sidebar div，然后将position:absolute应用于bottom div，则可以使用bottom div上的位置属性，它将相对于sidebar进行调整。

.sidebar {
    position:relative;
}

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