title: small little line at bottom of page
body: <p>I can't get rid of a small white line in my HTML page at the bottom:</p>
  
  <pre><code>.text {
      width: 90%;
  }
  
  .divfloatleft {
      float: left;
      margin-left: 35%;
      width: 15%;
      text-align: left;
      background: linear-gradient(#036, #0FF);
      height: 70%;
      margin-top: 6%;
  }
  
  .divpaginalogin {
      height: 100%;
  }
  
  .divfloatright {
      float: right;
      margin-right: 35%;
      width: 15%;
      text-align: right;
      background: linear-gradient(#0FF, #036);
      height: 70%;
      margin-top: 6%;
  }
  
  .div-container {
      background-image: url(../Images/pellicola.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 88%;
      overflow: hidden;
  }
  
  .div-child {
      height: 50%;
      border: 1px solid;
      width: 100%;
      position: relative;
  }
  
      .div-child a {
          text-decoration: none;
          font-weight: bold;
          color: black;
          font-family: helvetica, arial, sans-serif;
      }
  
      .div-child:hover {
          background-size: 100% 100%;
      }
  
  a:hover {
      color: #00C;
  }
  
  .div-login {
      background: linear-gradient(#003, #00F);
      color: white;
      font-family: helvetica, arial, sans-serif;
      font-weight: normal;
      font-size: 12px;
      border-bottom: 1px solid black;
      overflow: auto;
  }
  
  .div-footer {
      min-height: 5%;
      text-align: center;
      color: white;
      background: linear-gradient(#00F, #003);
      border-top: 1px solid black;
  }
  
  .table-login {
      margin-left: auto;
      margin-right: 0px;
  }
  
  .loginbutton {
      color: white;
      background-color: #0066ff;
      border-radius: 4px;
      border-color: black;
      border-width: 1px;
      box-shadow: 2px 2px 4px 0px #333333;
      font-weight: bold;
      font-size: 14px;
      width: 65px;
      cursor: pointer;
  }
  </code></pre>
  
  <p>This is my Razor page:</p>
  
  <pre><code>    &lt;div class="divpaginalogin"&gt;
          &lt;div class="div-login"&gt;
              @using (Html.BeginForm())
              {
                  @Html.ValidationSummary(true)
                  @Html.AntiForgeryToken()
                  &lt;table class="table-login"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;@Html.LabelFor(a =&gt; a.Username)&lt;/td&gt;
                          &lt;td&gt;@Html.LabelFor(a =&gt; a.Password)&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;@Html.TextBoxFor(a =&gt; a.Username, new { @class = "text" })&lt;/td&gt;
                          &lt;td&gt;@Html.PasswordFor(a =&gt; a.Password, new { @class = "text" })&lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="submit" value="Login" class="loginbutton" /&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;@Html.ValidationMessageFor(a =&gt; a.Password)&lt;/td&gt;
                          &lt;td&gt;@Html.ValidationMessageFor(a =&gt; a.Username)&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              }
          &lt;/div&gt;
          &lt;div class="div-container"&gt;
              &lt;div class="divfloatleft"&gt;
                  &lt;div class="div-child" onmouseover="Show(this, 'Contatti.png')" onmouseout="Hide(this)"&gt;
                      @Html.ActionLink("Contatti", "Contatti", null, new { @style = "position: absolute; top: 0px; left: 0px;" })
                  &lt;/div&gt;
                  &lt;div class="div-child" onmouseover="Show(this, 'Mappa.png')" onmouseout="Hide(this)"&gt;
                      @Html.ActionLink("Dove Siamo", "DoveSiamo", null, new { @style = "position: absolute; bottom: 0px; left: 0px;" })
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="divfloatright"&gt;
                  &lt;div class="div-child" onmouseover="Show(this, 'Informazioni.png')" onmouseout="Hide(this)"&gt;
                      @Html.ActionLink("Informazioni", "Informazioni", null, new { @style = "position: absolute; top: 0px; right: 0px;" })
                  &lt;/div&gt;
                  &lt;div class="div-child" onmouseover="Show(this, 'Chi-siamo.png')" onmouseout="Hide(this)"&gt;
                      @Html.ActionLink("Chi Siamo", "ChiSiamo", null, new { @style = "position: absolute; bottom: 0px; right: 0px;" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="footer" class="div-footer"&gt;
              &lt;p&gt;Videoteca online P.IVA: 00000000000&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>at the bottom appear a line which is about 0.3% height, it seems I can't cover the full HTML page if I add 1% to the footer instead the scrollbar appears, I also use this CSS:</p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  
  html, body {
      height: 100%;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/0Lug8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Lug8.jpg" alt="Image white line"></a></p>
  
  <p>I was thinking to set footer height from 5% to 5.3% but I don't know if that's the correcty way since I may be have something wrong in my HTML..</p>
  
  <p>Thanks to all!</p>