コンテンツをサイドバーの下部に貼り付けるにはどうすればいいですか？

Question

私はサイドバーを持っているサイトで作業しています。そのサイドバーには、サイドバーの一番下にあるフィードバックボタンがあります。 bodyというdivにあるfeedbackという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; 
} 

私はあなたにいくつかのコード例を与えるだろうと思いました。 min-heightを必ず設定してください。ビューポート全体をカバーする場合は、100vhを使用できます。

Answer 2

position: fixedをdiv.feedbackに設定する