元素出html，正文集合维度

Question

我正在使用 xtermjs 制作一个浏览器终端，一切正常，除了我的代码中有一个我无法弄清楚的错误。问题是当终端与页面底部对齐并且您键入任意键并按回车键几次直到您到达垂直 space 的末端附近时，终端将开始超出 HTML,正文。我尝试添加 border: 0px;正如 xterms github 中所建议的那样，但这并没有解决它。我什至试过 position: fixed;溢出：隐藏；保证金：0%；但这并没有解决它。如何使终端的位置贴在页面底部而不超出 HTML，body 的尺寸 width: 100%;高度：100%；何时到达垂直线的末端space？

var term = new Terminal({
  cursorBlink: "block"
});

var curr_line = '';
var entries = [];
var currPos = 0;
var pos = 0;

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

term.onKey(function(key) {
  const printable = !key.altKey && !key.altGraphKey && !key.ctrlKey && !key.metaKey &&
    !(key.key === ' ' && term._core.buffer.x < 6);
  if (key.key === '\r') { // Enter key
    if (curr_line.replace(/^\s+|\s+$/g, '').length != 0) { // Check if string is all whitespace
      entries.push(curr_line);
      currPos = entries.length - 1;
      term.prompt();
    } else {
      term.write('\n[2K\r\u001b[32m~$>> \u001b[37m');
    }
    curr_line = '';
  } else if (key.key === '\x7F') { // Backspace\
    if (term._core.buffer.x > 5) {
      curr_line = curr_line.slice(0, term._core.buffer.x - 6) + curr_line.slice(term._core.buffer.x - 5);
      pos = curr_line.length - term._core.buffer.x + 6;
      term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);
      term.write('3['.concat(pos.toString()).concat('D')); //term.write('3[<N>D');
      if (term._core.buffer.x == 5 || term._core.buffer.x == curr_line.length + 6) {
        term.write('3[1C')
      }
    }
  } else if (key.key === '\x1B[A') { // Up arrow
    if (entries.length > 0) {
      if (currPos > 0) {
        currPos -= 1;
      }
      curr_line = entries[currPos];
      term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);
    }
  } else if (key.key === '\x1B[B') { // Down arrow
    currPos += 1;
    if (currPos === entries.length || entries.length === 0) {
      currPos -= 1;
      curr_line = '';
      term.write('[2K\r\u001b[32m~$>> \u001b[37m');
    } else {
      curr_line = entries[currPos];
      term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);

    }
  } else if (printable && !(key.key === '\x1B[C' && term._core.buffer.x > curr_line.length + 4)) {
    if (key.key != '\x1B[D' && key.key != '\x1B[C') {
      var input = key.key;
      if (key.key == '\t') { // Tab
        input = "    ";
      }
      curr_line += input;
      term.write(input);
      // pos = curr_line.length - term._core.buffer.x + 4;
      // curr_line = [curr_line.slice(0, term._core.buffer.x - 5), input, curr_line.slice(term._core.buffer.x - 5)].join('');
      // term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);
      // term.write('3['.concat(pos.toString()).concat('D')); //term.write('3[<N>D');
    } else {
      term.write(key.key);
    }
  }
});

html,
body {
  width: 100%;
  height: 100%;
  /*overflow: hidden; didn't work*/
}

.codeRunCon {
  display: flex;
  position: absolute;
  right: 0%;
  bottom: 0%;
  width: 100%;
  height: 80%;
  background-color: inherit;
}

.codeRunCon #terminal {
  display: flex;
  position: absolute;
  top: 20px;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.xterm {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  font-feature-settings: "liga" 0;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
  outline: none;
}

.xterm .xterm-helpers {
  position: absolute;
  top: 0;
  /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
  z-index: 5;
}

.xterm .xterm-helper-textarea {
  /*
     * HACK: to fix IE's blinking cursor
     * Move textarea out of the screen to the far left, so that the cursor is not visible.
     */
  border: 0px;
  position: absolute;
  opacity: 0;
  left: -9999em;
  top: 0;
  width: 0;
  height: 0;
  z-index: -5;
  /** Prevent wrapping so the IME appears against the textarea at the correct position */
  white-space: nowrap;
  overflow: hidden;
  resize: none;
}

.xterm .composition-view {
  /* TODO: Composition position got messed up somewhere */
  background: #000;
  color: #FFF;
  display: none;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
}

.xterm .composition-view.active {
  display: block;
}

.xterm .xterm-viewport {
  /* On OS X this is required in order for the scroll bar to appear fully opaque */
  background-color: #000;
  overflow-y: scroll;
  cursor: default;
  position: absolute;
  right: -20px;
  left: 0;
  top: 0;
  bottom: 0;
  margin-top: auto;
}

.xterm-viewport::-webkit-scrollbar {
  background-color: var(--dark);
  width: 5px;
}

.xterm-viewport::-webkit-scrollbar-thumb {
  background: var(--highlight);
}

.xterm .xterm-screen {
  position: relative;
  width: 100% !important;
  height: 100% !important;
}

.xterm .xterm-screen canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
}

.xterm .xterm-scroll-area {
  visibility: hidden;
}

.xterm-char-measure-element {
  display: inline-block;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -9999em;
  line-height: normal;
}

.xterm {
  cursor: text;
}

.xterm.enable-mouse-events {
  /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
  cursor: default;
}

.xterm.xterm-cursor-pointer {
  cursor: pointer;
}

.xterm.column-select.focus {
  /* Column selection mode */
  cursor: crosshair;
}

.xterm .xterm-accessibility,
.xterm .xterm-message {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  color: transparent;
}

.xterm .live-region {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.xterm-dim {
  opacity: 0.5;
}

.xterm-underline {
  text-decoration: underline;
}

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

<div class="table-responsive codeRunCon" id="codeRunCon">
  <div id="terminal"></div>
</div>

Answer 1

查看 .codeRunCon #terminal 中的 css 并将 top: 20px; 更改为 bottom: 0。添加 body {margin: 0;} 应该也有帮助。

var term = new Terminal({
  cursorBlink: "block"
});

var curr_line = '';
var entries = [];
var currPos = 0;
var pos = 0;

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

term.onKey(function(key) {
  const printable = !key.altKey && !key.altGraphKey && !key.ctrlKey && !key.metaKey &&
    !(key.key === ' ' && term._core.buffer.x < 6);
  if (key.key === '\r') { // Enter key
    if (curr_line.replace(/^\s+|\s+$/g, '').length != 0) { // Check if string is all whitespace
      entries.push(curr_line);
      currPos = entries.length - 1;
      term.prompt();
    } else {
      term.write('\n[2K\r\u001b[32m~$>> \u001b[37m');
    }
    curr_line = '';
  } else if (key.key === '\x7F') { // Backspace\
    if (term._core.buffer.x > 5) {
      curr_line = curr_line.slice(0, term._core.buffer.x - 6) + curr_line.slice(term._core.buffer.x - 5);
      pos = curr_line.length - term._core.buffer.x + 6;
      term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);
      term.write('3['.concat(pos.toString()).concat('D')); //term.write('3[<N>D');
      if (term._core.buffer.x == 5 || term._core.buffer.x == curr_line.length + 6) {
        term.write('3[1C')
      }
    }
  } else if (key.key === '\x1B[A') { // Up arrow
    if (entries.length > 0) {
      if (currPos > 0) {
        currPos -= 1;
      }
      curr_line = entries[currPos];
      term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);
    }
  } else if (key.key === '\x1B[B') { // Down arrow
    currPos += 1;
    if (currPos === entries.length || entries.length === 0) {
      currPos -= 1;
      curr_line = '';
      term.write('[2K\r\u001b[32m~$>> \u001b[37m');
    } else {
      curr_line = entries[currPos];
      term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);

    }
  } else if (printable && !(key.key === '\x1B[C' && term._core.buffer.x > curr_line.length + 4)) {
    if (key.key != '\x1B[D' && key.key != '\x1B[C') {
      var input = key.key;
      if (key.key == '\t') { // Tab
        input = "    ";
      }
      curr_line += input;
      term.write(input);
      // pos = curr_line.length - term._core.buffer.x + 4;
      // curr_line = [curr_line.slice(0, term._core.buffer.x - 5), input, curr_line.slice(term._core.buffer.x - 5)].join('');
      // term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);
      // term.write('3['.concat(pos.toString()).concat('D')); //term.write('3[<N>D');
    } else {
      term.write(key.key);
    }
  }
});

html,
body {
  width: 100%;
  height: 100%;
  /*overflow: hidden; didn't work*/
  margin: 0; /* add this */
}

.codeRunCon {
  display: flex;
  position: fixed;
  right: 0%;
  bottom: 0%;
  width: 100%;
  height: 80%;
  background-color: inherit;
}

.codeRunCon #terminal {
  display: flex;
  position: absolute;
  /* top: 20px; */ /* change this */
  bottom: 0; /* to this */
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.xterm {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  font-feature-settings: "liga" 0;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
  outline: none;
}

.xterm .xterm-helpers {
  position: absolute;
  top: 0;
  /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
  z-index: 5;
}

.xterm .xterm-helper-textarea {
  /*
     * HACK: to fix IE's blinking cursor
     * Move textarea out of the screen to the far left, so that the cursor is not visible.
     */
  border: 0px;
  position: absolute;
  opacity: 0;
  left: -9999em;
  top: 0;
  width: 0;
  height: 0;
  z-index: -5;
  /** Prevent wrapping so the IME appears against the textarea at the correct position */
  white-space: nowrap;
  overflow: hidden;
  resize: none;
}

.xterm .composition-view {
  /* TODO: Composition position got messed up somewhere */
  background: #000;
  color: #FFF;
  display: none;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
}

.xterm .composition-view.active {
  display: block;
}

.xterm .xterm-viewport {
  /* On OS X this is required in order for the scroll bar to appear fully opaque */
  background-color: #000;
  overflow-y: scroll;
  cursor: default;
  position: absolute;
  right: -20px;
  left: 0;
  top: 0;
  bottom: 0;
  margin-top: auto;
}

.xterm-viewport::-webkit-scrollbar {
  background-color: var(--dark);
  width: 5px;
}

.xterm-viewport::-webkit-scrollbar-thumb {
  background: var(--highlight);
}

.xterm .xterm-screen {
  position: relative;
  width: 100% !important;
  height: 100% !important;
}

.xterm .xterm-screen canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
}

.xterm .xterm-scroll-area {
  visibility: hidden;
}

.xterm-char-measure-element {
  display: inline-block;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -9999em;
  line-height: normal;
}

.xterm {
  cursor: text;
}

.xterm.enable-mouse-events {
  /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
  cursor: default;
}

.xterm.xterm-cursor-pointer {
  cursor: pointer;
}

.xterm.column-select.focus {
  /* Column selection mode */
  cursor: crosshair;
}

.xterm .xterm-accessibility,
.xterm .xterm-message {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  color: transparent;
}

.xterm .live-region {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.xterm-dim {
  opacity: 0.5;
}

.xterm-underline {
  text-decoration: underline;
}

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

<div class="table-responsive codeRunCon" id="codeRunCon">
  <div id="terminal"></div>
</div>

元素出html，正文集合维度

Element going out of html, body set dimension

javascript

html

css

xtermjs