Menu
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.
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.
561
There is no need of using wrapper. The latest version of the sticky footer that can be found in the official examples are not using and it works nicely.
Here is the 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:
<body>
<div class="container">
...
</div>
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
</body>
You need to wrap your nav bar and container in the div having wrap id and not footer
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
/* 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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
