我正在寻找让我的页脚变粘的建议。
我尝试使用此页面作为示例完成此操作：Example
当页面内容较少时，屏幕高度栏位正常并且粘在底部，但当内容较大且出现垂直滑块时，页脚显示在内容的底部而不是保持粘在屏幕底部。< / p>
这是我的_layout
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
/* Top navbar code */
</div>
<div id="wrap">
<div class="container body-content">
@RenderBody()
<hr />
</div>
</div>
<div id="footer">
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
</body>
body {
/*padding-top: 60px;
padding-bottom: 20px;*/
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
/* styles for validation helpers */
.field-validation-error {
color: #b94a48;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #b94a48;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #b94a48;
}
.validation-summary-valid {
display: none;
}
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
答案 0 :(得分：4)
添加：
position: fixed;
bottom:0;
width:100%;
到#footer。也可以尝试使用position:absolute
可选：您可能还想添加text-align:center;以使文字居中。
这就是你所需要的一切。