twitter-bootstrap 粘性引导页脚重叠页面内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21933356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
sticky bootstrap footer overlapping content of page
提问by Hitesh Modha
I am using bootstrap 3.0, I have sticky footer placed at bottom of my page.Footer is overlapping content of page in phone and tablet view.
我正在使用引导程序 3.0，我在页面底部放置了粘性页脚。页脚在手机和平板电脑视图中重叠页面内容。
footer code is written below:
页脚代码如下：
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f1f1f1;
}
#push
{
height: 60px;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
basic page Skeleton:
基本页面骨架：
<div id="wrap">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
.....
</div>
</div>
<div class="container">
......
</div>
</div> <!-- End -Wrap -->
<div id="push"></div>
<div id="footer">
<div class="container">
....
</div>
</div>
Please tell me what kind of changes i need to do i my code.
请告诉我我的代码需要做什么样的改变。
回答by Lipis
There is no need of using wrapper. The latest version of the sticky footerthat can be found in the official examplesare not using and it works nicely.
不需要使用包装器。可以在官方示例中找到的最新版本的粘性页脚没有使用，并且运行良好。
Here is the CSS
这是CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
For the below HTML:
对于以下 HTML：
<body>
<div class="container">
...
</div>
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
</body>
回答by Shoaib Chikate
You need to wrap your nav bar and container in the div having wrap id and not footer
您需要将导航栏和容器包装在具有包装 ID 而不是页脚的 div 中
Dummy Structure:
虚拟结构：
<div id="wrap">
<jsp:include page="header.jsp"/> // say ur nav bar code
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8"> my body </div>
<div class="col-md-2"></div>
</div>
</div>
</div><%--wrap ends here--%>
<jsp:include page="footer.jsp"/>
Stickyfooter.css
Stickyfooter.css
/* Styles go here */
/* Sticky footer styles
-------------------------------------------------- */
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: #cccccc;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
回答by Hitesh Modha
There was no problem in css, but i have given height in some DIV, so it was not working.
css 中没有问题，但我在某些DIV 中给出了高度，所以它不起作用。
eg. With Bug
例如。有错误
<div style="height:400px">
</div>
I have removed height -
我已经删除了高度 -
<div>
...
</div>
Thank you all for answering...
谢谢大家的回答...
