javascript - 具有上边距的绝对 CSS 定位

Question

我有一个侧边栏，里面有一些文本和一个页脚(贴在侧边栏的底部)。当我将窗口的高度调整(减小)到例如一半，页脚位于侧边栏中其他文本的顶部。例如，有没有一种方法可以设置 margin-top，以便在调整窗口大小时，页脚保持其底部位置，直到它即将位于其他元素之上(在它之前)？

.sidebar {
  position: fixed;
  width: 260px;
  overflow-y: auto;
  border-right: 1px solid #dadada;
  display: inline-block;
  background-color: #BDE6CA;
  float: left;
  z-index: 3;
}
.sidebar-content {
  position: relative;
  height: 100%;
  width: 100%;
}
.sidebar-option {
  color: #00aa4f;
  font-size: 20px;
  cursor: pointer;
  padding: 20px 0px 20px 20px;
}
.sidebar-bottom {
  bottom: 0px;
  position: absolute;
  width: 100%;
  padding: 0px 40px 20px 0px;
  text-align: right;
}

<div class="sidebar max-height">
  <div class="sidebar-content">

    <div class="sidebar-top">
      <img class="sidebar-logo" src="http://lorempixel.com/50/50">
      <div class="sidebar-option">
        <img src="http://lorempixel.com/50/50">
        <span>Section 1</span> 
      </div>
      <div class="sidebar-option">
        <img src="http://lorempixel.com/50/50">
        <span>Section 2</span>
      </div>
    </div>

    <div class="sidebar-bottom">
      <div class="sidebar-text"><span>Sidebar footer</span>
      </div>
    </div>

  </div>
</div>

Answer 1

您可以将 padding-bottom:40px; (示例)添加到 .sidebar-top 或 .sidebar-content，这样就会.sidebar-bottom

有足够的空间