9

Monaco Editor をいくつかの固定テキストの下のページに埋め込みたいのですが、Monaco Editor の高さをページの残りの部分を正確に埋めたいと思っています。人々はここで答えをくれました：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>

max-height:100%Chrome では完全に動作しますが、Safari ではエディターが表示されません#container > *。max-height:100vhまたはに設定するとheight: 100vh、Safari では多かれ少なかれ機能します (フォーカスがエディターの下部に達すると少し点滅します) が、Chrome では上下にスクロールするときにスクローラーが表示されます。

Chrome と Safari の両方で機能するソリューションを持っている人はいますか? または、Chrome または Safari のみに特定のルールを設定することはできますか?

4

3 に答える 3

3

vhと をflex-grow一緒に使用できます。

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

.rb #container {
    flex-grow: 1; 
}

編集: あは - Monico Editor には、fixedOverflowWidgets: true設定できる があります。ここに最終的な機能があります: 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
  });
});

編集:コメントで述べたように、私は Safari にアクセスできませんが、ここに Safari CSS ハックのページがあります:クロームではなくサファリのみの CSS ハックはありますか?

于 2017-08-11T01:58:18.253 に答える