如何使內容貼在側邊欄的底部？

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