HTML：网格面板高度不一致？

Question

我是HTML，CSS和JS的初学者，并且正在创建文本编辑器，就像使用Electron的Atom或VSCode一样，这里是JSFiddle：

https://jsfiddle.net/chrismg12/zmbp7at3/。

我刚刚从《 CSS网格指南》的这支笔复制了网格布局：

https://codepen.io/adrifolio/pen/GvXVgP。

我正面临的问题在小提琴中是显而易见的，ace文本编辑器位于页脚上方，这不仅是文本编辑器的问题，还不是诸如textarea之类的任何其他html元素的问题。我尝试将#editor（此html中的ace文本编辑器）的高度设置为calc（inherit-30px）（30 px bc是页脚的高度）。
如果有什么帮助，这个问题我之前也曾发生过，不仅限于这个项目。

我尝试将#editor的高度设置为：

calc(inherit-30px)  
calc(100vh -30px)  
calc(ato-30px)  
auto  

还有更多让我想不起来的东西。
我还尝试将footer的z-index设置为较高的值，但这只会导致文本可见，但是无论如何，即使可行，由于文本编辑器的某些空间不可见，这也会有些糟糕。

编辑器的CSS代码：

#editor {  
  height: inherit;  
  font-size: 18px;  
}

我希望它不会超出页脚

Answer 1

进行高度计算时，应同时考虑制表符和页脚高度。由于它们的高度均为30px，因此calc(100vh - 60px)应该可以完成这项工作。