title: Full screen a part of page
body: <p>I have a html code like this:</p>
  
  <pre><code>&lt;header&gt;title&lt;/header&gt;
  
  &lt;content class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-3 leftside"&gt;
        &lt;ul&gt;
          &lt;li&gt;test&lt;/li&gt;
          &lt;li&gt;test&lt;/li&gt;
          &lt;li&gt;test&lt;/li&gt;
          &lt;li&gt;test&lt;/li&gt;
          &lt;li&gt;test&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-9"&gt;
        &lt;div id="map"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/content&gt;
  
  &lt;footer&gt;footer&lt;/footer&gt;
  </code></pre>
  
  <p>I want show the <strong>content</strong> section of code in one monitor screen.</p>
  
  <p>google map must be full screen (and responsive).</p>
  
  <p>and also side menu must be full screen (for more rows, It must use scroll in it's columns)</p>
  
  <p>how can I do it?</p>
  
  <p><a href="http://jsfiddle.net/26mrX/642/" rel="nofollow noreferrer">demo code sample</a></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>when I open the page by brower, I could see the header and the content (in full screen) and with scroll I can see the footer section.</p>