title: Dynamic <div> height on Google Apps Script
body: <p>Hello Stack Overflow Community! I haven't really utilized this resource and basically learned how to work Google Apps Script from the ground up (with my very limited knowledge of scripting languages). I am having trouble with embedding jQuery into my Web App and I turn to the experts for help.</p>
  
  <p>This is just a quick example I came up with to illustrate what I am trying to achieve. What I want is for the "container" div to have a dynamic height. That way, the whole screen is filled up, no matter what size it is (well, not a phone most likely). Here is the code:</p>
  
  <p><strong>Code.gs</strong></p>
  
  <pre><code>function doGet(request) {
    return HtmlService.createTemplateFromFile('app').evaluate();
  }
  
  function include(filename) {
    return HtmlService.createHtmlOutputFromFile(filename).getContent();
  }
  </code></pre>
  
  <p><strong>stylesheet.html</strong></p>
  
  <pre><code>&lt;style&gt;
  
  #main {
    height: 100%;
    width: 100%;
    background-color: #DDD;
  }
  
  #header {
    height: 100px;
    width: 100%;
    background-color: blue;
    position: top;
  }
  
  #menu {
    height: 50px;
    width: 100%;
    background-color: black;
    position: top;
  }
  
  #container {
    height: auto;
    background-color: red;
    margin-left: 15%;
    margin-right: 15%;
  }
  
  #footer {
    height: 50px;
    width: 100%;
    background-color: blue;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>javascript.html</strong></p>
  
  <pre><code>&lt;script&gt;
  
  function adjust(){
    var maxH = $("#main").height();
    var afterHeight = maxH - ($("#header").height() - $("#menu").height() - $("#footer").height());
    $(".kamil_test").css({height:afterHeight});
  }
  
  $(document).ready(adjust);
  $(window).resize(adjust);
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>app.html</strong></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"&gt;
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;  
  
      &lt;?!= include('stylesheet.html'); ?&gt;
      &lt;?!= include('javascript.html'); ?&gt;
  
      &lt;div id="main"&gt;
        &lt;div id="header"&gt;
        &lt;/div&gt;
  
        &lt;div id="menu"&gt;
        &lt;/div&gt;
  
        &lt;div id="container"&gt;
        &lt;/div&gt;
  
        &lt;div id="footer"&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I think my post is too long, but I wanted to show what is going on from all four parts. Wanted to make sure I wasn't overlooking anything.</p>