diff --git a/static/css/playground.css b/static/css/playground.css
index 8bbbfcb..6d37163 100644
--- a/static/css/playground.css
+++ b/static/css/playground.css
@@ -14,8 +14,16 @@
  * limitations under the License.
  */
 
-body{ 
-    overflow: auto;
+body {
+    display: flex;
+    flex-direction: column;
+    max-height: 100vh;
+}
+
+.main {
+    flex: 1;
+    min-height: 1px;
+    display: flex;
 }
 
 .header {
@@ -61,7 +69,7 @@ body{
 }
 
 .share-panel .font-ico:hover {
-    transform:rotate(360deg);
+    transform: rotate(360deg);
 }
 
 .footer {
diff --git a/static/js/playground.js b/static/js/playground.js
index f9ab49e..458478d 100644
--- a/static/js/playground.js
+++ b/static/js/playground.js
@@ -26,7 +26,6 @@ var playground = {
     editor: undefined,
     pid: undefined,
     _resize: function () {
-        $('#goNews, #editorDivWrap').height($(window).height() - 40 - $(".footer").height());
         playground.editor.setSize("auto", ($("#editorDiv").parent().height() * 0.7) + "px");
     },
     _initShare: function () {
diff --git a/views/playground/index.html b/views/playground/index.html
index 4efdd22..beded38 100644
--- a/views/playground/index.html
+++ b/views/playground/index.html
@@ -62,8 +62,8 @@
                 </div>
             </div>
         </div>
-        <div class="fn-clear">
-            <div class="fn-left" id="editorDivWrap">
+        <div class="main">
+            <div id="editorDivWrap">
                 <div id="editorDiv">
                     <textarea rows="20" id='editor' class="fn-none">{{.code}}</textarea>
                 </div>
@@ -71,7 +71,7 @@
                     <div id="output" class="output"></div>
                 </div>
             </div>
-            <div class="fn-right" id="goNews"></div>
+            <div id="goNews"></div>
         </div>
         <div class="footer">
             <span class="wrapper">