스티키 푸터

<div class="page" id="page">
  <header>Header</header>
  <main id="main"></main>
  <footer>Footer — always at the bottom</footer>
</div>

.page{width:min(64%,240px);height:min(92%,300px);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,.12);background:var(--bg)}
header{background:var(--surface);border-bottom:1px solid var(--line);padding:10px;font-size:11px;font-weight:700;text-align:center}
main{flex:1 0 auto;padding:12px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
main .ln{display:block;height:8px;border-radius:3px;background:var(--surface);border:1px solid var(--line);flex-shrink:0}
footer{background:var(--accent);color:#fff;padding:10px;font-size:9px;font-weight:700;text-align:center;flex-shrink:0}

const main = document.getElementById('main');
function render(n) {
  main.innerHTML = '';
  for (let i = 0; i < n; i++) {
    const ln = document.createElement('i');
    ln.className = 'ln';
    main.appendChild(ln);
  }
}
let long = false;
render(2);
setInterval(() => {
  long = !long;
  render(long ? 9 : 2);
}, 2200);