small little line at bottom of page - html

Question

I can't get rid of a small white line in my HTML page at the bottom:
.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;
}
This is my Razor page:
<div class="divpaginalogin">
<div class="div-login">
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
<table class="table-login">
<tr>
<td>#Html.LabelFor(a => a.Username)</td>
<td>#Html.LabelFor(a => a.Password)</td>
</tr>
<tr>
<td>#Html.TextBoxFor(a => a.Username, new { #class = "text" })</td>
<td>#Html.PasswordFor(a => a.Password, new { #class = "text" })</td>
<td>
<input type="submit" value="Login" class="loginbutton" /></td>
</tr>
<tr>
<td>#Html.ValidationMessageFor(a => a.Password)</td>
<td>#Html.ValidationMessageFor(a => a.Username)</td>
</tr>
</table>
}
</div>
<div class="div-container">
<div class="divfloatleft">
<div class="div-child" onmouseover="Show(this, 'Contatti.png')" onmouseout="Hide(this)">
#Html.ActionLink("Contatti", "Contatti", null, new { #style = "position: absolute; top: 0px; left: 0px;" })
</div>
<div class="div-child" onmouseover="Show(this, 'Mappa.png')" onmouseout="Hide(this)">
#Html.ActionLink("Dove Siamo", "DoveSiamo", null, new { #style = "position: absolute; bottom: 0px; left: 0px;" })
</div>
</div>
<div class="divfloatright">
<div class="div-child" onmouseover="Show(this, 'Informazioni.png')" onmouseout="Hide(this)">
#Html.ActionLink("Informazioni", "Informazioni", null, new { #style = "position: absolute; top: 0px; right: 0px;" })
</div>
<div class="div-child" onmouseover="Show(this, 'Chi-siamo.png')" onmouseout="Hide(this)">
#Html.ActionLink("Chi Siamo", "ChiSiamo", null, new { #style = "position: absolute; bottom: 0px; right: 0px;" })
</div>
</div>
</div>
<div id="footer" class="div-footer">
<p>Videoteca online P.IVA: 00000000000</p>
</div>
</div>
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:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
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..
Thanks to all!

Answer 1

Just tested your page, and with this minor modification in your .div-footer class the white line at the bottom seems to be gone. I've tested in several resolutions including mobile.
.div-footer {
min-height: 5%;
text-align: center;
color: white;
background: linear-gradient(#00F, #003);
border-top: 1px solid black;
/* changes added to fix footer at bottom */
position:absolute;
bottom:0;
width:100%;
}
Here's an edited Punkler