我是HTML、CSS和JS的初学者，正在使用Electron创建一个文本编辑器，很像Atom或VSCode，下面是JSFiddle:
https://jsfiddle.net/chrismg12/zmbp7at3/.
我刚刚从CSS网格指南的这支笔上复制了网格布局：
https://codepen.io/adrifolio/pen/GvXVgP.
我面临的问题是显而易见的，ace文本编辑器正在覆盖页脚，这不仅仅是文本编辑器的问题，对任何其他html元素(如textarea)来说都不是问题。我尝试将#editor(这个html中的ace文本编辑器)的高度设置为calc(inherit-30px)(30px bc，这是页脚的高度)
如果有什么帮助的话，这个问题以前也发生过，而且不仅限于这个项目。
我已经尝试将#editor的高度设置为：
calc(inherit-30px)
calc(100vh -30px)
calc(ato-30px)
auto
还有太多我想不起来的事情
我也尝试过将页脚的z索引设置为一个高值，但这只会导致只能看到文本，但无论如何，即使这样做有效，也会有点糟糕，因为文本编辑器的一些空间是不可见的。
编辑器的CSS代码：
#editor {
height: inherit;
font-size: 18px;
}
我希望它不要越过页脚
进行高度计算时，应同时考虑制表符和页脚的高度。由于它们每个都有30像素高，calc(100vh - 60px)应该完成这项工作。