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

要实现一个上下固定，中间自动填满的布局，你可以使用CSS的Flexbox或者Grid布局。下面我将给出两种方法的示例。

方法一：使用Flexbox

HTML:

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

CSS:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 或者其他你需要的高度 */
}

.header, .footer {
  height: 50px; /* 或者其他你需要的高度 */
  background-color: #f8f9fa; /* 或者其他你需要的颜色 */
}

.main-content {
  flex: 1; /* 使中间部分自动填满剩余空间 */
  background-color: #e9ecef; /* 或者其他你需要的颜色 */
}

方法二：使用Grid

HTML:

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

CSS:

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh; /* 或者其他你需要的高度 */
}

.header, .footer {
  height: 50px; /* 或者其他你需要的高度 */
  background-color: #f8f9fa; /* 或者其他你需要的颜色 */
}

.main-content {
  background-color: #e9ecef; /* 或者其他你需要的颜色 */
}

注意，在使用Grid布局时，grid-template-rows属性中的1fr表示剩余可用空间的一个分数单位，这样.main-content就会自动填满剩余空间。同时，.header和.footer的高度被设置为固定值。如果你想要它们的高度也根据内容自动调整，可以将height属性改为auto。不过，在这种情况下，你需要确保.header和.footer的内容不会过多，以免挤压.main-content的空间。

另外，vh是视口高度单位，100vh表示视口高度的100%，也就是全屏高度。你可以根据需要调整这个值。