Update

public/css/style.css

@@ -13,7 +13,7 @@ html, body {
 }
 
 body {
-  overscroll-behavior-y: none;
+  overscroll-behavior: none;
 }
 
 h1, h2, h3, h4, h5, h6, p {
@@ -82,24 +82,40 @@ img {
 }
 
 #footer {
-  display :none;
+  padding: 5px;
+  z-index: 1001;
+  position: absolute;
+  bottom: 0;
+  left: 0;
   width: 100%;
   background-color: #444;
   color: #fff;
   text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 #footer #copyright {
-  font-size: 12px;
   color: #999;
 }
 
+#copyright img {
+  width: 16px;
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+
 #footer #copyright a {
-  font-size: 12px;
+  display: block;
+  padding: 0;
+  margin: 0;
+  font-size:0;
   color: #999;
 }
 
 #footer #copyright a:hover {
   color: #fff;
-  text-decoration: underline;
+  text-decoration: none;
 }

public/js/main.js

@@ -4,10 +4,9 @@ $(function() {
     let adjustScreen = () => {
         let screenHeight = $(window).height();
         let headerHeight = $('#header').outerHeight();
-        let containerHeight = screenHeight - headerHeight;
-        console.log(containerHeight);
+        let footerHeight = $('#footer').outerHeight();
+        let containerHeight = screenHeight - headerHeight - footerHeight;
         $('#container').css({ top: `${headerHeight}px` });
-        $('#container').css({ height: `${containerHeight}px`});
         $('.column').css({ height: `${containerHeight}px`});
     };
 
@@ -18,6 +17,7 @@ $(function() {
     // Setup editor
     let editor = ace.edit('editor');
     editor.getSession().setUseWrapMode(true);
+    editor.renderer.setScrollMargin(10, 10, 10, 10);
     editor.setOptions({
         maxLines: Infinity,
         indentedSoftWrap: false,
@@ -26,7 +26,6 @@ $(function() {
         theme: 'ace/theme/github',
         // TODO consider some options
     });
-
     editor.on('change', () => {
         isEdited = true;
         convert();