title: Remove white space under sticky footer in Bootstrap 4 on iPhone
body: <p>I get this white space below my sticky footer, when in small mobile devices. For an example when viewing in 'iPhone SE' screen size. </p>
  
  <p>I used this same footer and css from bootstrap examples but unable to make the whitespace go away.</p>
  
  <p>I thought this happens because my text is long, then I added footer height using media queries, but it doesn't look good. I do not know how to fix it. Any guidance would be greatly appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Sticky footer styles
  -------------------------------------------------- */
  html {
    position: relative;
    min-height: 100%;
  
  }
  body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    text
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
    background-color: #0000ff
  }
  
  
  /* Custom page CSS
  -------------------------------------------------- */
  /* Not required for template or sticky footer method. */
  
  .container {
    width: auto;
    max-width: 680px;
    padding: 0 15px;
  }
  
  
  .text-muted {
      color: #fff!important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!-- saved from url=(0057)https://getbootstrap.com/docs/4.0/examples/sticky-footer/ --&gt;
  &lt;html lang="en" class="gr__getbootstrap_com"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;link rel="icon" href="https://getbootstrap.com/favicon.ico"&gt;
  
      &lt;title&gt;Sticky Footer Template for Bootstrap&lt;/title&gt;
  
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link href="assets/css/bootstrap.css" rel="stylesheet"&gt;
   &lt;link href="assets/css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;!-- Custom styles for this template --&gt;
      &lt;link href="assets/css/dashboard.css" rel="stylesheet"&gt;
      &lt;link href="assets/css/sticky-footer.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
    &lt;body data-gr-c-s-loaded="true"&gt;
  
      &lt;!-- Begin page content --&gt;
      
  
      &lt;footer class="footer"&gt;
        &lt;div class="container"&gt;
          &lt;span class="text-muted"&gt;This is a test to check this sticky footer. This footer breaks in small screens.&lt;/span&gt;
        &lt;/div&gt;
      &lt;/footer&gt;
  
  
  &lt;!-- Bootstrap core JavaScript
      ================================================== --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;script src="assets/js/jquery-3.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="assets/js/popper.js"&gt;&lt;/script&gt;
      &lt;script src="assets/js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;
      &lt;script src="assets/js/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;
    
  
  &lt;/body&gt;&lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>