Bootstrap粘性页脚不停留粘 [英] Bootstrap sticky footer not staying sticky
问题描述
我尝试使用此页面作为示例来完成此操作：示例
当页面内容少于屏幕高度脚本时ok和stick bottom，但是当内容较大，并且垂直滑块出现时，页脚显示在内容的底部，而不是保持粘在屏幕底部。
_layout
HTML
< body&
< div class =navbar navbar-inverse navbar-fixed-top>
/ *顶部navbar代码* /
< / div>
< div id =wrap>
< div class =container body-content>
@RenderBody（）
< hr />
< / div>
< / div>
< div id =footer>
< footer>
< p>& copy; @ DateTime.Now.Year - 我的ASP.NET应用程序< / p>
< / footer>
< / div>
< / body>
CSS
body {
/ * padding-top：60px;
padding-bottom：20px; * /
}
/ *设置填充以保持内容不出现边缘* /
.body-content {
padding-left：15px;
padding-right：15px;
}
/ *设置表单输入元素的宽度，因为它们默认为100％宽* /
input，
select，
textarea {
max-width：280px;
}
/ *验证助手的样式* /
.field-validation-error {
color：＃b94a48;
}
.field-validation-valid {
display：none;
}
input.input-validation-error {
border：1px solid＃b94a48;
}
输入[type =checkbox] input-validation-error {
border：0 none;
}
.validation-summary-errors {
color：＃b94a48;
}
.validation-summary-valid {
display：none;
}
html，
body {
height：100％;
/ * html和body元素不能有任何填充或边距。 * /
}
/ *包装器页面内容下推页脚* /
#wrap {
min-height：100％;
height：auto;
/ *负数缩进页脚的高度* /
margin：0 auto -60px;
/ * pad下面的页脚高度* /
padding：0 0 60px;
}
/ *在这里设置页脚的固定高度* /
#footer {
height：60px;
background-color：＃f5f5f5;
}
add：
position：fixed;
bottom：0;
width：100％;
至 #footer 。还可以尝试使用 position：absolute
可选：您也可以添加 text-
这是您需要的。
I am looking for suggestions for making my footer sticky.
I tried to accomplish this using this page as a example: Example
When content of a page is less then the screen height footbar is ok and sticks bottom but when content is bigger and vertical slider occurs the footer shows on the bottom of the content instead of stay sticky on the bottom of the screen.
Here my _layout
HTML
<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>
CSS
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;
}
add:
position: fixed;
bottom:0;
width:100%;
to #footer. Also try with position:absolute
Optional: you may also want to add text-align:center; to keep the text centered.
That's all you need.
这篇关于Bootstrap粘性页脚不停留粘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
