HTML: несоответствующая высота панели сетки?

Я новичок в HTML, CSS и JS, и я создаю текстовый редактор, очень похожий на Atom или VSCode с использованием Electron, и вот JSFiddle:

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

Я только что скопировал сетку из этого пера в CSS Grid Guide:

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

Проблема, с которой я столкнулся, видна в скрипте, текстовый редактор ace выходит за нижний колонтитул, и это проблема не только для текстового редактора, а для любого другого элемента html, например textarea. Я попытался установить высоту #editor (текстовый редактор ace в этом html) как calc (наследовать - 30 пикселей) (30 пикселей до н.э. это высота нижнего колонтитула) .
Если это поможет, эта проблема тоже возникала у меня раньше и не ограничивается только этим проектом.

Я пробовал установить высоту #editor как:

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

и многое другое, о чем я больше не могу думать. Я также попытался установить z-index нижнего колонтитула на высокое значение, но в результате будет виден только текст, но в любом случае, даже если это сработает, это будет немного плохо, так как некоторое пространство текстового редактора не видно.

Код CSS для редактора:

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

Я хочу, чтобы он не выходил за нижний колонтитул