私はflexboxとvh CSSの測定をお勧めします。
この例では、フッタはビューポートの下部にこだわっていますが、また、必要に応じて.sidebarはウィンドウ高さよりも大きく成長することができます。したがって、.footerは、.cardの小さなコンテンツで下部に固定され、.cardのコンテンツが大きくなると下方に移動します（スクロールする必要があります）。
body {
margin: 0;
padding: 0;
}
.sidebar {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.card {
flex-grow: 1;
}
<html>
<body>
<div class="sidebar">
<div class="card">
<div class="card-header">TITLE</div>
<div class="card-body">
CONTENT
</div>
</div>
<div class="footer">
FEEDBACK CONTENT
</div>
</div>
</body>
</html>
あなたは本当に.footerをしたい場合、あなたはposition: fixedを試みることができる、.cardでさえ内容の多くで、一番下にを立ち往生。 .cardにコンテンツを追加しました。これは、ボディよりも大きくなったときに何が起こるのかをより簡単に確認できるようにします。&カードの内容はスクロールしますが、.footerは常にビューポートの下部に貼り付けられます。
.card {
/*
.footer is out of the document flow,
so make sure to leave enough space
for it at the bottom of .card
*/
margin-bottom: 1.6em;
}
.footer {
/*
here's the magic, fixed position
at the bottom of the screen
*/
position: fixed;
bottom: 0;
/*
without a bg-color, this will get
messed up with overflowing .card
content
*/
background-color: white;
height: 1.6em;
}
<html>
<body>
<div class="sidebar">
<div class="card">
<div class="card-header">TITLE</div>
<div class="card-body">
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
</div>
</div>
<div class="footer">
FEEDBACK CONTENT
</div>
</div>
</body>
</html>
あなたはあなたが今持っているものたちを表示するために投稿することができますいくつかのコードを持っていますか？ – adamk22
合意されたコードまたは少なくともスクリーンショットが役立ちます。私は特にこの文を理解していません： "問題は、メインページのコンテンツの高さに左右されます。" –
サイドバーのようなサウンドは100％の高さですので、メインコンテンツが長いとサイドバーも長くなりますが、サイドバーのコンテンツは長くなく、サイドバーの下部に大きな隙間を与えます。この* design *（コードではない）問題にはどんな解決策が必要かははっきりしていません。 [更新：画面の下部にあるフッターが追加されました] –