Geek Answers Handbook

Let the Monaco editor fill the rest of the page (cross browser)

I want to embed the Monaco editor on a page under some fixed texts, I want the Monaco editor height to fill exactly the rest of the page. People gave me the answer here : JSBin :

<html> <style> html, body, .rb { margin: 0; height: 100%; } .rb { display: table; width: 100%; border-collapse: collapse; } .top, .myME { display: table-row; } .buffer { display: table-cell; } .top .buffer { background: lightblue; height:1%; } .myME .buffer { background: tomato; } #container { position:relative; } #container > * { overflow:auto; max-width:100%; max-height:100%; } </style> <body> <div class="rb"> <div class="top"> <div class="buffer"> 1<br/>2<br/>3<br/>4<br/> </div> </div> <div class="myME"> <div class="buffer" id="container"> </div> </div> </div> <script src="https://www.matrixlead.com/monaco-editor/min/vs/loader.js"></script> <script> require.config({ paths: { 'vs': 'https://www.matrixlead.com/monaco-editor/min/vs' }}) require(["vs/editor/editor.main"], function () { var editor = monaco.editor.create(document.getElementById('container'), { value: 'function x() {\n\tconsole.log("Hello world!");\n}', language: 'javascript', minimap: { enabled: false }, automaticLayout: true, scrollBeyondLastLine: false }); }); </script> </body> </html>

It works fine in Chrome, but it does not display the editor in Safari due to max-height:100% of #container > * . If we set it to max-height:100vh or height: 100vh , it works more or less in Safari (a little blinking when the focus reaches the bottom of the editor), while when scrolling up and down in Chrome, the scroller is displayed.

Does anyone have a solution that works in both Chrome and Safari? Otherwise, is it possible to set a specific rule only for Chrome or Safari?

+7
css cross-browser height display monaco-editor
source share
3 answers

Finally, in Chrome and Safari, the following code does not create a scroll bar while scrolling up and down, there are no lines at the bottom when the code is long, the footer is always at the bottom, regardless of size. In addition, it is important to test it in an independent html file, and not in JSBin.

 <html> <style> .rb { height: 100%; display: flex; flex-direction: column; } .myME { flex:1; overflow: hidden; } .footer { flex-shrink: 0; background:#f8f8f8; border-top: 1px solid #e7e7e7 } </style> <body> <div class="rb"> <div class="top">1<br/>2<br/>3<br/>4<br/></div> <div class="myME" id="container"></div> <div class="footer">haha</div> </div> <script src="https://www.matrixlead.com/monaco-editor/min/vs/loader.js"></script> <script> require.config({ paths: { 'vs': 'https://www.matrixlead.com/monaco-editor/min/vs' }}) require(["vs/editor/editor.main"], function () { var editor = monaco.editor.create(document.getElementById('container'), { value: 'function x() {\n\tconsole.log("Hello world!");\n}\nfunction x() {\n\tconsole.log("Hello world!");\n}\nfunction x() {\n\tconsole.log("Hello world!");\n}', language: 'javascript', minimap: { enabled: false }, automaticLayout: true, scrollBeyondLastLine: false }); }); </script> </body> </html>
0
source share

You can use vh and flex-grow together:

 .rb { display: flex; flex-direction: column; height: 100vh; margin: 0; } .rb #container { flex-grow: 1; }

Edit:. Aha Editor - Monico has fixedOverflowWidgets: true , which can be set . Here is the final functional thing: https://jsfiddle.net/pa8y2fzy/3/

 require.config({ paths: { 'vs': 'https://www.matrixlead.com/monaco-editor/min/vs' } }) require(["vs/editor/editor.main"], function() { var editor = monaco.editor.create(document.getElementById('container'), { value: [ 'function x() {', '\tconsole.log("Hello world!");', '}' ].join('\n'), language: 'javascript', fixedOverflowWidgets: true }); });

Edit: As I mentioned in the comments, I don’t have access to Safari, but here is the Safari CSS hack page: is there css hacking a safari just NOT Chrome?

+2
source share

I cannot check in Safari, but I see no reason to use max-height / width when you always want it to be 100% relative to the container. Try using

 #container > * { overflow:auto; width:100%; height:100%; }
0
source share

More articles:


All Articles