我无法摆脱底部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;
}
这是我的剃刀页面:
<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%高度的线,似乎我无法覆盖整个HTML页面如果我向页脚添加1%而不是滚动条出现,我也使用这个CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
我正在考虑将页脚高度从5%设置为5.3%,但我不知道这是否是正确的方法,因为我的HTML可能有问题。
感谢所有人!
答案 0 :(得分: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