实现一个上下固定，中间自动填满的布局

有多种方法可以实现一个上下固定，中间自动填满的布局。以下列出几种常见且有效的方法，并提供代码示例：

1. Flexbox 布局:

这是现代前端开发中最推荐和常用的方法，简洁且灵活。

<div class="container">
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保容器至少占满屏幕高度 */
}

header {
  /* Header 样式 */
  background-color: lightblue;
  padding: 10px;
}

main {
  /* Main Content 样式 */
  flex-grow: 1; /*  关键：让 main 填充剩余空间 */
  background-color: lightgray;
  padding: 10px;
}

footer {
  /* Footer 样式 */
  background-color: lightgreen;
  padding: 10px;
}

2. Grid 布局:

Grid 布局也能轻松实现，并提供更强大的二维布局能力，但对于简单的三段式布局略显冗余。

<div class="container">
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

.container {
  display: grid;
  grid-template-rows: auto 1fr auto; /*  关键：1fr 让 main 填充剩余空间 */
  min-height: 100vh;
}

header {
  /* Header 样式 */
  background-color: lightblue;
  padding: 10px;
}

main {
  /* Main Content 样式 */
  background-color: lightgray;
  padding: 10px;
}

footer {
  /* Footer 样式 */
  background-color: lightgreen;
  padding: 10px;
}

3. 绝对定位 + 计算高度:

这是一种较老的方法，需要 JavaScript 计算高度，现在不推荐使用，但为了完整性仍然列出。

<div class="container">
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

.container {
  position: relative;
  min-height: 100vh;
}

header {
  /* Header 样式 */
  background-color: lightblue;
  padding: 10px;
}

main {
  /* Main Content 样式 */
  background-color: lightgray;
  padding: 10px;
  position: absolute;
  top: /* header height */;
  bottom: /* footer height */;
  left: 0;
  right: 0;
}

footer {
  /* Footer 样式 */
  background-color: lightgreen;
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

需要 JavaScript 动态计算 main 的 top 和 bottom 值，使其适应 header 和 footer 的高度变化。

总结:

强烈推荐使用 Flexbox 布局，因为它简洁、易于理解和维护，并且拥有广泛的浏览器兼容性。 Grid 布局功能更强大，但对于这个场景略显复杂。 绝对定位的方法较为繁琐，需要 JavaScript 辅助，不推荐使用。

选择哪种方法取决于你的具体需求和项目上下文。 希望这些信息能帮助你!