css首尾固定中间自适应

对于这个问题，可以使用 flexbox 或者 grid 布局来实现。具体实现方式可以参考以下代码：

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

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  height: 50px;
  background-color: #ccc;
}

.content {
  flex: 1;
  background-color: #eee;
}

.footer {
  height: 50px;
  background-color: #ccc;
}

这个布局会将容器分为三个部分，头部和底部固定高度，中间部分自适应高度。

相关问题

js首尾固定中间自适应

实现这种布局可以使用 flexbox 或者 grid 布局。

flexbox 布局：

HTML：

<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

CSS：

.container {
  display: flex;
  justify-content: space-between;
}

.left, .right {
  width: 100px; /*固定宽度*/
}

.main {
  flex: 1; /*自适应宽度*/
}

grid 布局：

HTML：

<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

CSS：

.container {
  display: grid;
  grid-template-columns: 100px auto 100px;
}

.left, .right {
  width: 100%; /*占满列*/
}

.main {
  grid-column: 2 / 3; /*跨越 2 列*/
}

js首尾固定中间自适应布局

可以使用CSS的flex布局，将容器设置为flex布局，然后通过设置flex-grow属性使中间的内容自适应宽度，而固定的头部和尾部则可以设置固定宽度。

HTML结构：

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

CSS样式：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 让容器铺满整个屏幕 */
}

.header {
  height: 50px;
  background-color: #ccc;
  flex-shrink: 0; /* 固定高度 */
}

.content {
  flex-grow: 1; /* 自适应宽度 */
  background-color: #eee;
}

.footer {
  height: 50px;
  background-color: #ccc;
  flex-shrink: 0; /* 固定高度 */
}

这样就实现了一个简单的js首尾固定中间自适应布局。