如何实现类似JSFiddle的粘性底部Console，让上方内容自适应滚动

你提供的HTML结构无需修改，直接搭配下面的CSS和JS代码即可实现需求，核心采用Flex弹性盒布局实现，无需复杂定位计算，兼容性适配所有现代浏览器。

核心特性支持 #

• 控制台始终固定在页面底部，不会覆盖上方内容区域
• 控制台折叠时，上方内容区域自动填充全部可用视口高度
• 控制台展开时，若上方内容超出可用高度会自动出现纵向滚动条

完整CSS代码 #

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

/* 页面容器设为垂直弹性布局 */
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* 上方内容区域：自动占满剩余高度，超出滚动 */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f8f9fa;
}

/* 底部控制台样式 */
.console {
  border-top: 1px solid #dee2e6;
  background: #fff;
}

/* 控制台头部：可点击切换折叠/展开 */
.console .header {
  padding: 8px 16px;
  background: #e9ecef;
  cursor: pointer;
  user-select: none;
}

.console .header h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* 控制台输出区域 */
.console .output {
  max-height: 240px;
  overflow-y: auto;
  padding: 8px 16px;
  transition: all 0.2s ease;
}

/* 折叠状态下的输出区域 */
.console .output.collapsed {
  height: 0;
  padding: 0 16px;
  overflow: hidden;
}

#console-output {
  list-style: none;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.5;
}

折叠/展开交互JS代码 #

如果需要点击控制台头部切换折叠展开状态，添加以下JS代码即可：

const consoleHeader = document.querySelector('.console .header');
const consoleOutput = document.querySelector('.console .output');

consoleHeader.addEventListener('click', () => {
  consoleOutput.classList.toggle('collapsed');
});

实现原理说明 #

1. 页面根容器设置为垂直方向的弹性布局，子元素沿垂直轴排列
2. 上方内容区域设置flex: 1，会自动占满控制台之外的所有剩余视口高度
3. 内容区域添加overflow-y: auto属性，内容超出自身高度时自动出现滚动条，不会挤压底部控制台的位置
4. 控制台折叠仅需修改输出区域的高度属性，内容区域会自动适配填充空余高度，无需额外逻辑计算

内容的提问来源于stack exchange，提问作者JokerMartini