Demo: set text area & ouput boxes to full height

demo/assets/index.css

@@ -1 +1 @@
-body{margin-bottom:20px;overflow:hidden}.demo-options{margin-bottom:10px}.checkbox{margin-right:10px}.source,.result,.result-src{width:100%;height:350px}.result{padding-right:20px;overflow:auto;}.result img{max-width:100%}.result-src{display:none}.result-src-content{white-space:pre}.result-as-text .result-src{display:block}.result-as-text .result{display:none}.demo-control{position:absolute;right:15px;top:0;padding:0 10px;border-radius:0 4px;font-size:12px;background-color:#666;color:#fff !important;opacity:.6;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;}.demo-control:hover{opacity:1}.demo-control a{margin:0 20px;color:#fff !important}.hljs{background:none;padding:0}.gh-ribbon{display:block;position:absolute;right:-60px;top:44px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);width:230px;z-index:10000;white-space:nowrap;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background-color:#686868;box-shadow:0 0 2px rgba(102,102,102,0.4);padding:1px 0;}.gh-ribbon a{text-decoration:none !important;border:1px solid #ccc;color:#fff;display:block;font-size:13px;font-weight:700;outline:medium none;padding:4px 50px 2px;text-align:center}
+html,body,.full-height{height:100%}body{overflow-x:hidden;padding-bottom:180px}.demo-options{margin-bottom:10px}.checkbox{margin-right:10px}.source{width:100%}.result{padding-right:20px;overflow:auto;}.result img{max-width:100%}.result-src{display:none}.result-src-content{white-space:pre}.result-as-text .result-src{display:block}.result-as-text .result{display:none}.demo-control{position:absolute;right:15px;top:0;padding:0 10px;border-radius:0 4px;font-size:12px;background-color:#666;color:#fff !important;opacity:.6;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;}.demo-control:hover{opacity:1}.demo-control a{margin:0 20px;color:#fff !important}.hljs{background:none;padding:0}.gh-ribbon{display:block;position:absolute;right:-60px;top:44px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);width:230px;z-index:10000;white-space:nowrap;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background-color:#686868;box-shadow:0 0 2px rgba(102,102,102,0.4);padding:1px 0;}.gh-ribbon a{text-decoration:none !important;border:1px solid #ccc;color:#fff;display:block;font-size:13px;font-weight:700;outline:medium none;padding:4px 50px 2px;text-align:center}

demo/assets/index.styl

@@ -1,6 +1,10 @@
+html, body, .full-height
+  height 100%
+
+
 body
-  margin-bottom 20px
-  overflow hidden
+  overflow-x hidden
+  padding-bottom 180px
 
 .demo-options
   margin-bottom 10px
@@ -8,9 +12,8 @@ body
 .checkbox
   margin-right 10px
 
-.source, .result, .result-src
+.source
   width 100%
-  height 350px
 
 .result
   padding-right 20px

demo/index.html

@@ -53,10 +53,12 @@ console.log(md.parse('# Remarkable rulezz!'));
           <input id="langprefix" type="input" placeholder="language prefix" title="css class language prefix for fenced code blocks" class="form-control _tip">
         </div>
       </div>
-      <div class="row">
-        <div class="col-xs-6">
+    </div>
+    <div class="container full-height">
+      <div class="row full-height">
+        <div class="col-xs-6 full-height">
           <div class="demo-control"><a href="#" class="source-clear">clear</a><a id="permalink" href="./" title="Share this snippet as link"><strong>permalink</strong></a></div>
-          <textarea class="source"># Typography 
+          <textarea class="source full-height"># Typography 
 
 ## Headings
 
@@ -673,10 +675,10 @@ With a reference later in the document defining the URL location:
 
 </textarea>
         </div>
-        <section class="col-xs-6">
+        <section class="col-xs-6 full-height">
           <div class="demo-control"><a href="#" class="result-mode">html / source</a></div>
-          <div class="result"></div>
-          <pre class="result-src"><code class="result-src-content"></code></pre>
+          <div class="result full-height"></div>
+          <pre class="result-src full-height"><code class="result-src-content full-height"></code></pre>
         </section>
       </div>
     </div>

demo/index.jade

@@ -51,18 +51,19 @@ html
             title='css class language prefix for fenced code blocks'
           )
 
-      .row
-        .col-xs-6
+    .container.full-height
+      .row.full-height
+        .col-xs-6.full-height
           .demo-control
             a.source-clear(href='#') clear
             a#permalink(href='./' title='Share this snippet as link'): strong permalink
-          textarea.source= s.source
-        section.col-xs-6
+          textarea.source.full-height= s.source
+        section.col-xs-6.full-height
           .demo-control
             a.result-mode(href='#') html / source
-          .result
-          pre.result-src
-            code.result-src-content
+          .result.full-height
+          pre.result-src.full-height
+            code.result-src-content.full-height
 
     .gh-ribbon
       a(href='https://github.com/jonschlinkert/remarkable' target='_blank') Fork me on GitHub