Wysokość Monako Editor

chcę zrobić bardzo prostą Monaco Redaktor: JSBin:Wysokość Monako Editor

<!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>

Kiedy widzę go w Chrome i przewijać w górę iw dół, tam jest scroller dla całego okna. Wydaje się, że dzieje się tak dlatego, że wysokość edytora jest większa niż wysokość okna. Po prostu nie chcę widzieć żadnych przewijaczy. Czy ktoś wie, jak to osiągnąć?

Edit 1: zrzut ekranu w Safari 10.1.2 z height: calc(100% - 24px)

Rozwiązanie:

Z pomocą odpowiedzi, o to rozwiązanie działa dla mnie:

1) musimy to sprawdzić w niezależnym pliku html zamiast w JSBin

2) klucz jest w użyciu overflow: hidden

3) W wyniku tego, poniższy kod nie tworzy żadnego paska przewijania podczas przewijania w górę iw dół, nie istnieją żadne linie ukryte na dnie, gdy kod jest długa :

<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>

Źródło

2017-08-12 SoftTimur

Wierzę, że działa to tylko poprzez ustawienie marginesu ciała i padding na 0, a przelewu .me do ukrytego.

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

ta nie spowoduje swoje linie w dolnej niewidzialny, ponieważ Monako będzie obsługiwać przewijanie dla Ciebie.

W rzeczywistości dostajesz natywny pasek przewijania tylko dlatego, że ma to coś wspólnego z tym, w jaki sposób Monaco ma zaimplementowane przewijanie. Ustawienie przepełnienia kontenera edytora na ukryty będzie działało dobrze.

P.S Należy pamiętać, że rozmiar edytora nie zmieni się po zmianie rozmiaru okna, więc należy wykryć zmianę rozmiaru i zadzwonić pod numer editor.layout() ręcznie.

Źródło

2017-08-20 05:19:54 MMhunter

EDITED

Użyj tego:

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

To działa na moim komputerze.

Źródło

2017-08-12 20:36:49

Problem "przepełnienia: ukryty" polega na tym, że podczas pisania tekstu z wieloma liniami część tekstu jest rzeczywiście ukryta na dole. Jest to szczególnie widoczne w Safari. Nie tego chcę. – SoftTimur

rozwiązaniem jest OK człowiek. zmienić 100vh na 98vh i problem zniknął ... –

Ale skąd pochodzi '98vh'? – SoftTimur

Istnieje miejsca 30px dodane przez class="label" div. znajduje się poza ramką iframe, której używasz, ale zajmuje miejsce w dokumencie.

Aby rozwiązać problem, musisz dostosować 30 pikseli w edytorze, zmniejszając go z jednostki div .me.

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

Mam nadzieję, że to rozwiąże Twój problem.

Źródło

2017-08-18 10:02:28

Dziękuję ... Czy mógłbyś stworzyć działający jsbin dla Safari? Próbowałem, ale to nie działało dla mnie ... – SoftTimur

Zmień to na 35px, ponieważ iframe 'class =" stretch "' ma dopełnienie 35 pikseli, co ma wpływ na safari. Zmiana na 35px zostanie rozwiązana globalnie. –

Próbowałem, nadal mogłem przewinąć bardzo daleko i zobaczyć pasek przewijania w Safari. – SoftTimur

Aktualizacja CSS jak poniżej

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

i aktualizować swoją strukturę HTML jak poniżej

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

sprawdzić wyjście tutaj https://jsbin.com/timoyot/edit?html,output

To może pomóc

Źródło

2017-08-21 05:23:32 Sanjay

Można ustawić wysokość edytora, aby pasował do ekranu i używał overflow: hidden; w oknie, wraz z overflow: auto; w edytorze

Źródło

2017-08-21 19:50:06 MoonKnight98

użyj:

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

Spacje wokół pojemnika powoduje, że błąd.

Źródło

2017-08-21 20:12:53

Odpowiedz

Powiązane problemy