高度摩納哥編輯

的我想要一個很簡單的摩納哥編輯：JSBin：高度摩納哥編輯

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <style> 
     .me { 
      height: 100vh; 
     } 
    </style> 
</head> 
<body> 
    <div class="me" id="container"></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 }, 
      scrollBeyondLastLine: false 
      }); 
     }); 
    </script> 
</body> 
</html>

當我看到它在Chrome和上下滾動，沒有針對整個窗口的滾動條。看起來這是因爲編輯器的高度大於窗口的高度。我只是不想看到任何滾動條。有誰知道如何做到這一點？

編輯1：在Safari 9.1.2的截圖與height: calc(100% - 24px)

解決方案：

隨着答案的幫助下，這裏是解決方案爲我工作：

1）我們需要在一個獨立的html文件中進行測試，而不是在JSBin

2）的關鍵是使用overflow: hidden

3）其結果是，在滾動了下面的代碼不創建任何滾動條和向下，沒有隱藏在底線當代碼長：

<html> 
    <style> 
    body { 
     overflow: hidden; 
    } 
    .myME { 
     height: 100% 
    } 
    </style> 
    <body> 
     <div class="myME" id="container"></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>

來源

2017-08-12 SoftTimur

我相信它只是通過設置身體的邊距和填充爲0，並且.me的溢出隱藏起作用。

.me { 
     height: 100vh; 
     overflow: hidden; 
    } 
    body{ 
     margin:0; 
     padding:0; 
    }

這不會導致您的底線不可見，因爲摩納哥會爲您處理滾動。

事實上，你正在獲得原生滾動條，只是因爲這與摩納哥如何獲得滾動實施的東西有關。將編輯器容器的溢出設置爲隱藏將會正常工作。請注意，當您調整窗口大小時，編輯器的大小不會改變，因此您必須檢測調整大小並手動調用editor.layout()。

來源

2017-08-20 05:19:54 MMhunter

EDITED

使用這一個：

.me { 
    position:absolute; left:0; top:0; 
    width:100%; height:100%; max-height:100% !important; 
    margin:0; padding:0; 
    overflow:hidden; 
}

它適用於我的電腦。

來源

2017-08-12 20:36:49

「溢出：隱藏」的問題在於，當您用多行文本編寫文本時，文本的一部分確實隱藏在底部。這在Safari中尤其明顯。這不是我想要的。 – SoftTimur

解決方案是可以的人。將100vh更改爲98vh，問題消失.... –

但是'98vh'從哪裏來？ – SoftTimur

class="label" div增加了30px的空間。它位於您正在使用的iframe之外，但佔用了文檔中的空間。

因此，要解決您的問題，您必須在編輯器中調整30px，將其從.me div中減去。

.me { 
    height:calc(100vh - 30px); 
}

希望這能解決您的問題。

來源

2017-08-18 10:02:28

謝謝......你能爲Safari做一個可用的jsbin嗎？我嘗試了，但它不適用於我... – SoftTimur

請將其更改爲35px，因爲iframe class =「stretch」'具有影響Safari瀏覽器的35px的padding-top。將其更改爲35px將在全球範圍內解決。 –

我試過了，我仍然可以向下滾動很遠並在Safari中看到一個滾動條。 – SoftTimur

更新你的CSS如下

.me { 
    height:50%; 
    position:relative;display:block 
    } 
    .me-parent{ 
    position:absolute; 
    top:0; 
    left:0px; 
    right:0px; 
    height:100%;display:block; 
    }

和更新HTML結構如下圖

<div class="me-parent"><div class="me" id="container"></div></div>

檢查輸出這裏https://jsbin.com/timoyot/edit?html,output

這可能有助於

來源

2017-08-21 05:23:32 Sanjay

您可以設置高度編輯器的適合屏幕並使用overflow: hidden;窗戶上，用overflow: auto;在編輯

來源

2017-08-21 19:50:06 MoonKnight98

使用該沿：在容器周圍

.me { 
    height: 100vh; 
    font-size: 16px; 
} 
body { 
    margin: 0; 
    padding: 0; 
    font-size: 0; 
}

空白字符會導致錯誤。

來源

2017-08-21 20:12:53

高度摩納哥編輯

回答

相關問題