xtermjs实现浏览器终端固定底部时超出HTML、body边界问题求解

你遇到的溢出问题由两个核心错误导致：一是容器高度计算错误，二是Xterm.js未绑定尺寸适配逻辑，内容超出后未触发内部滚动反而撑大容器。可按以下步骤修复：

1. 修正CSS布局 #

替换原有CSS中以下片段：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 阻止页面整体滚动 */
}

.codeRunCon {
  position: fixed; /* fixed比absolute更稳定固定在底部 */
  right: 0;
  bottom: 0;
  width: 100%;
  height: 80%;
  background-color: inherit;
  overflow: hidden; /* 内部内容超出直接裁剪，不会溢出到父级 */
}

.codeRunCon #terminal {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: calc(100% - 20px); /* 减去top偏移的20px，刚好填满父容器 */
  background-color: #000;
}

/* 删掉.xterm里重复的position属性，保留relative即可 */
.xterm {
  width: 100%;
  height: 100%;
  font-feature-settings: "liga" 0;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  cursor: text;
}

/* 删掉.xterm-viewport的right:-20px，避免横向溢出 */
.xterm .xterm-viewport {
  background-color: #000;
  overflow-y: auto;
  cursor: default;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}

其余Xterm默认样式无需修改。

2. 增加JS尺寸适配逻辑 #

引入官方维护的fit适配插件，自动匹配容器尺寸：

• 先在HTML中添加插件引入：

<script src="https://cdn.jsdelivr.net/npm/xterm@4.15.0/lib/xterm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.min.js"></script>

• 修改原有JS初始化逻辑：

// 初始化fit插件
const fitAddon = new FitAddon.FitAddon();
var term = new Terminal({
  cursorBlink: "block",
  scrollback: 1000, // 可自定义滚动缓冲区行数，按需调整
});
term.loadAddon(fitAddon);
term.open(document.getElementById('terminal'));
// 初始化后适配容器
fitAddon.fit();
// 窗口大小变化时重新适配
window.addEventListener('resize', () => {
  fitAddon.fit();
});

// 以下原有业务逻辑保持不变
var curr_line = '';
var entries = [];
var currPos = 0;
var pos = 0;

term.prompt = () => {
  term.write('\n\r' + curr_line + '\r\n\u001b[32m~$>> \u001b[37m');
};
term.write('#Terminal');
term.prompt();

// ... 剩余onKey等原有逻辑完全保留

修改后终端会始终固定在页面底部80%高度区域，内容超出可视区域时触发终端内部滚动，不会溢出html和body边界。

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