如何解决使用codemirror和xterm.js,元素高度超过了网格布局限制
我试图将CodeMirror和Xterm.js放在GridLayout中,如以下代码所示。我在此处为1fr 200px 80px
指定了grid-template-rows
,对此有疑问。
出现的问题
-
如果CodeMirror文本区域包含足够的文本,则高度将随着文本量的增加而增加。我希望显示滚动条而不会伸出
1fr
的行为。 -
xterm.js伸出容器。 xterm.js伸出容器。我希望xterm.js符合
grid-template-rows
指定的大小。
我该如何解决这些问题?谢谢。
const editor = CodeMirror.fromTextArea(document.getElementById("editor"),{
lineNumbers: true,mode: "text/x-csrc",viewportMargin: Infinity
});
const codemirror = document.getElementById("code-mirror");
editor.setSize("100%","100%");
const term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
window.addEventListener("resize",function() {
editor.setSize();
},false);
.container {
height: 100vh;
}
.editor {
display: grid;
grid-template-rows: 1fr 200px 80px;
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.js"></script>
<div class="container">
<div class="editor">
<div id="code-mirror">
<textarea id="editor">
typedef struct {
void* arg_socket;
zmq_msg_t* arg_msg;
char* arg_string;
unsigned long arg_len;
int arg_int,arg_command;
int signal_fd;
int pad;
void* context;
sem_t sem;
} acl_zmq_context;
</textarea>
</div>
<div id="terminal">
</div>
<div class="footer">
<button type="button">
run
</button>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。