如何使用CSS实现移动端固定头部和页脚的布局？

<div class="container">
  <header class="header">固定头部区域</header>
  <main class="content">中间内容区域（可滚动）</main>
  <footer class="footer">固定页脚区域</footer>
</div>

.container {
  display: flex;
  min-height: 100vh; /* 确保容器占据整个视口高度 */
  flex-direction: column; /* 设置为垂直方向布局 */
}

.header, .footer {
  position: sticky; /* 或 fixed，根据需求选择 */
  top: 0; /* header */
  bottom: 0; /* footer */
  width: 100%;
  /* 添加其他样式 */
}

.content {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 允许内容区域垂直滚动 */
  /* 添加其他样式 */
}

.container {
  position: relative; /* 容器需要相对定位 */
  min-height: 100vh;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  /* 添加其他样式 */
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* 添加其他样式 */
}

.content {
  padding-top: calc(var(--header-height)); /* 使用CSS变量动态计算顶部 padding */
  padding-bottom: calc(var(--footer-height)); /* 使用CSS变量动态计算底部 padding */
  overflow-y: auto;
  /* 添加其他样式 */
}

:root {
  --header-height: 50px; /* 设置header高度 */
  --footer-height: 60px; /* 设置footer高度 */
}