title: Chrome android height/scroll issue with footers and the address bar
body: <p>So here is an interesting situation I have come across. 
  You are on Chrome for android, when you scroll the body the address bar runs away and hides. Great!</p>
  
  <p>Now you want to add a footer to your page that sticks to the bottom. You do the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    margin:0;
    padding:0;
    height:100%;
  }
  
  body {
    margin:0;
    padding:0;
    height:100%;
  }
  
  #contentWrap {
    margin:0;
    padding:0;
    padding-bottom:4em;
    min-height:calc(100% - 4em);
    position:relative;
  }
  
  #footer {
    margin:0;
    padding:0;
    height:4em;
    width:100%;
    position:absolute;
    bottom:0;
    
    background:#262626;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
    
    &lt;div id="contentWrap"&gt;
      &lt;div id="footer"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works brilliantly, the footer will always stick to the bottom of the page regardless of content size or view-port scale.</p>
  
  <p>However! Running this on a mobile design and testing in Chrome Android I found that setting the body to an explicit size, it will only scroll "content within" causing the address bar to stick around. Overflowing content is just set to default scroll in other words. 
  Noticing this I tried changing it to min-height so that it will always either be the size of the view-port if no content is available to fill it, or change height if there happens to be many lines of content.</p>
  
  <p>Doing this however causes the contentWrap to base its height on the content rather than the parent element ie. &lt;body&gt;. So your footer now floats instead of sticking to the bottom.</p>
  
  <p>I have played around with many combinations and cant seem to get what I want. Seems you have to live with either a sticky address bar OR a floating footer.</p>
  
  <p>Please any ideas or thoughts on this would be appreciated.</p>