2 つのセクションを持つコンテナーを作成しようとしています。上部のセクションは、コンテナーの垂直方向の高さの 100% からスティッキー フッターの高さを引いたものを占めるスクロール div になります。スティッキー フッターの高さをハードコードすることはできません (2 つの異なる高さの 2 つのモードで動作するため)。可能であればcssのみを使用し、jsを使用しないことをお勧めします。
HTML
<div class="container">
<div class="scrollArea">
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
</div>
<div class="footer">
<!-- the contents of the footer will determine the height needed -->
</div>
</div>
CSS
.container {
position: relative;
height: 100%;
width: 100%;
}
.scrollArea {
position: absolute;
top: 0px;
bottom [height of sticky footer]; left: 0px;
right: 0px;
overflow-x: hidden;
overflow-y: scroll;
}
.footer {
position: absolute;
bottom: 0px;
height: [height of sticky footer];
left: 0px;
right: 0px;
}