如何使内容贴在侧边栏的底部？

Question

我正在一个带有侧栏的网站上工作，在该侧栏中，我希望一些反馈按钮贴在侧栏的底部。 我在一个名为“反馈”的div中有一个“反馈”按钮，在一个名为“ body”的div中。 然后在我的scss文件中，我有：

.card{
  position: relative;

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

这是HTML的结构：

<div class="card">
  <div class="card-header"></div>
  <div class="card-body">
    SIDEBAR CONTENT
  </div>
  <div class="feedback">
    FEEDBACK BUTTONS
  </div>
</div>

但这似乎行不通，我不确定下一步该怎么做。

Answer 1

您是否考虑过将FlexBox用于布局？

虽然目前所有主流浏览器都支持它，但它的性能很好。

看看这个

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

编辑：我以为我会给你一些示例代码

.card{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


.card-body{
   flex: 1;
}

这应该做。 确保设置最小高度。 如果要覆盖整个视口，则可以使用100vh 。

Answer 2

尝试设置position: fixed为div.feedback