Menu
Probably a solution that has been answered, but with all the wrong answers (aka, answers that do not solve this problem), it is very difficult to sift through to find the correct one.
The issue is this --- How to make CodeMirror fill 100% of the parent div --- without forcing the rest of the page into 100% height as this causes the following issues :
When using
html, body { height: 100%; }
You are effectively telling the page that the entire height is the view port of the browser for the entire page including all contents. The problem with this, is that I do not want everything on the page to be constrained to this proportion. What I would like to do, is have normal access to the page without breaking responsiveness (aka, mobile, etc support), and still have a single div on the page (right panel) have a div that ONLY THAT div is 100% height --- of the space in that div. I do not want 100% height to overflow into the menu, go underneath/over the menu, etc. It must stay within the box.
809
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
Set Codemirror height based upon the content It can be achieved with simple CSS. Once this is done, your codemirror hright will be adjusted based upon the content inside it. From the above GIF, you can check that the height is being adjusted dynamically based upon the content.
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
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 combined with vh allows you to constrain the size of the element to the visible area.
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With