html - 页面底部的小线

Question

我无法摆脱底部 HTML 页面中的一条小白线:

.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;
}

这是我的 Razor 页面:

    <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>

在底部出现一条大约 0.3% 高度的线，如果我在页脚中添加 1% 而不是滚动条出现，我似乎无法覆盖整个 HTML 页面，我也使用这个 CSS:

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

我想将页脚高度从 5% 设置为 5.3%，但我不知道这是否正确，因为我的 HTML 中可能有问题..

感谢大家!

Answer 1

刚刚测试了您的页面，并在您的 .div-footer 类中做了这个小修改，底部的白线似乎消失了。我已经在包括移动在内的多种分辨率下进行了测试。

.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%;
}

这是经过编辑的 Punkler