[SOLVED] how to make this simple ace editor take full height?

how to make this simple ace editor take full height?

the width property works pretty well but the height property doesn't work for some reasons, how to make the editor take full height? I also want to add "open file" button (from storage) and "save as" button in the top bar, how can we do these, please? I'm sorry I can't add a snippet to the question because the snippet editor of stackoverflow doesn't support touch devices.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <style type="text/css" media="screen">
    * {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
    }
    
    .ace_editor {
      font-weight: bold;
      width: 100%;
      height: 100vh;
    }
    
    .toolbar {
      border: 1px solid gray;
      background: #333;
    }
  </style>
</head>

<body>
  
  <!-- load ace -->
  <script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script>
  <!-- load ace language_tools extension -->
  <script src="http://ajaxorg.github.io/ace-builds/src/ext-language_tools.js"></script>
  <script>
    var buildDom = ace.require("ace/lib/dom").buildDom;
    var editor = ace.edit();
    editor.setOptions({
        theme: "ace/theme/monokai",
        mode: "ace/mode/html",
        maxLines: 30,
        minLines: 30,
        autoScrollEditorIntoView: true,
    });
    var refs = {};
    function updateToolbar() {
        refs.saveButton.disabled = editor.session.getUndoManager().isClean();
        refs.undoButton.disabled = !editor.session.getUndoManager().hasUndo();
        refs.redoButton.disabled = !editor.session.getUndoManager().hasRedo();
    }
    editor.on("input", updateToolbar);
    editor.session.setValue(localStorage.savedValue || "Welcome to ace Toolbar demo!")
    function save() {
        localStorage.savedValue = editor.getValue(); 
        editor.session.getUndoManager().markClean();
        updateToolbar();
    }
    editor.commands.addCommand({
        name: "save",
        exec: save,
        bindKey: { win: "ctrl-s", mac: "cmd-s" }
    });
    
    buildDom(["div", { class: "toolbar" },
        ["button", {
            ref: "saveButton",
            onclick: save
        }, "save"],
        ["button", {
            ref: "undoButton",
            onclick: function() {
                editor.undo();
            }
        }, "undo"],
        ["button", {
            ref: "redoButton",
            onclick: function() {
                editor.redo();
            }
        }, "redo"],
        ["button", {
            style: "font-weight: bold",
            onclick: function() {
                editor.insertSnippet("**${1:$SELECTION}**");
                editor.renderer.scrollCursorIntoView()
            }
        }, "bold"],
        ["button", {
            style: "font-style: italic",
            onclick: function() {
                editor.insertSnippet("*${1:$SELECTION}*");
                editor.renderer.scrollCursorIntoView()
            }
        }, "Italic"],
    ], document.body, refs);
    document.body.appendChild(editor.container)
    
    window.editor = editor;
  </script>
  
</body>

</html>

Solution

If you want your CSS to have effect in terms of the height you should remove the maxLines: 30 from your editor setup.