CodeMirror fill div and make div 100% height

Question

Perhaps the solution to which the answer was given, but with all the wrong answers (for example, answers that do not solve this problem), it is very difficult to sift to find the right one.

The problem is this: how to make CodeMirror fill 100% of the parent div --- without forcing the rest of the page to 100% height, as this causes the following problems:

Using

html, body { height: 100%; } 

In fact, you tell the page that the entire height is the browser view port for the entire page, including all content. The problem is that I do not want everything on the page to be limited by this proportion. What I would like to do has normal access to the page without violating responsiveness (aka, mobile, etc. Support), and still there is one div on the page (right panel), has a div, ONLY what the div is - 100% height --- space in this div. I don’t want the 100% height to overflow in the menu, go below / above the menu, etc. She should stay inside the box.

Answer 1

Have you tried this attribute:

 /* Firefox */ height: -moz-calc(100vh - 190px); /* WebKit */ height: -webkit-calc(100vh - 190px); /* Opera */ height: -o-calc(100vh - 190px); /* Standard */ height: calc(100vh - 190px); 

Using calc in combination with vh allows you to limit the size of the element to the visible area.