Hit*_*dha 8 css twitter-bootstrap
我正在使用bootstrap 3.0,我的页面底部放置了粘性页脚.Footer重叠了手机和平板电脑视图中的页面内容.
页脚代码如下:
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;
}
}
基本页面骨架:
<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>
请告诉我我的代码需要做哪些更改.
Lip*_*pis 17
不需要使用包装器.可以在官方示例中找到的最新版本的粘性页脚没有使用,它运行良好.
这是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;
}
对于以下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>