I am using Bootstrap with a sticky footer and off-canvas menu. Sticky footer works fine on desktop view, but footer begins to overlap content on mobile view. I think it is due to the .row-offcanvas position being set to relative on mobile media query. If I remove the offcanvas menu the sticky footer works as expected on mobile devices. The other issue is when you scroll down in mobile view white space appears under the footer.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/master-simple.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<header>
<div class="container">
<div class="row">
<div class="col-xs-4 headerLinks">
<a href="#" class="hidden-xs">Coverage Details</a>
<div id="drawerNavigationID" data-toggle="offcanvas" class="hidden-sm">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="col-xs-4">
<a href="#" class="center-block"></a>
</div>
<div class="col-xs-4 text-right headerLinks">
<!-- Click to call on Mobile Device -->
<a href="#" class="phoneIcon visible-xs"></a>
<a href="#" class="hidden-xs">Contact Us</a>
</div>
</div>
</div>
</header>
<!-- Off Canvas Menu -->
<div class="container">
<div class="row">
<div class="col-sm-6 sidebar-offcanvas visible-xs">
<ul>
<li><a href="coverageDetails.html" title="Coverage Details">Coverage Details</a></li>
<li><a href="contact.html" title="Contact Us">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<!-- Page Content -->
<div class="container mainWrapper">
<div class="row">
<div class="col-md-10 col-centered" id="confirmationWrapper">
<h2 class="noBorderBottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet tempor nisl, ut rutrum lacus vulputate vel.</h2>
<h3>CLAIM NUMBER: 12345678954</h3>
<p class="claimNumberText">Nulla libero enim, consequat at pulvinar eu, ultrices a risus.</p>
<p>Nulla libero enim, consequat at pulvinar eu, ultrices a risus. Mauris bibendum enim non magna maximus, non tempor lacus lacinia. Fusce vestibulum tincidunt vulputate. Suspendisse eu erat et neque facilisis consequat id in quam. Cras convallis massa at ornare hendrerit.</p>
<div class="row text-center">
<a href="#" target="blank" class="shopLink">Shop</a>
</div>
</div>
</div>
</div><!-- End Page Content -->
<footer>
<div class="container">
<ul>
<li><a href="#">Terms of Use</a> | </li>
<li><a href="#">Privacy Policy</a></li>
</ul>
<p>© 2015 ANulla libero enim</p>
</div>
</footer>
</div><!-- End Container-fluid Row -->
</div><!-- End Container-fluid -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/offcanvas.js"></script>
</body>
</html>
CSS:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 196px;
}
* {
font-weight: normal!important;
margin: 0;
padding: 0;
outline: 0;
outline-style: none;
}
header {
font-family: 'aig_futura_medregular', aig_futura_medregular, Arial, Helvetica, sans-serif;
position: absolute;
top:0;
z-index: 100;
height: 92px;
width: 100%;
padding-top: 15px;
color: #fff;
background-color: rgba(0,164,228,0.9);
}
header a {
font-family: "aig_futuraregular", Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
color: #fff!important;
}
header a:hover {
border-bottom: 1px solid #fff;
}
header .headerLogo {
width: 116px;
height: 63px;
cursor: pointer;
background: url(../img/aigLogo.png) no-repeat center bottom;
}
.headerLinks {
margin-top: 20px;
}
footer {
font-size: 14px;
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 186px;
padding: 40px 20px 20px;
color: #fff;
background-color: #252525;
}
footer ul {
margin: 0 0 20px;
padding: 0;
list-style: none;
}
footer ul li {
display: inline;
}
footer li a {
color:#fff;
}
.mainWrapper {
margin-top: 92px;
}
@media screen and (max-width:768px){
#drawerNavigationID{
padding-left: 10px;
}
#drawerNavigationID span {
display: block;
width: 25px;
height: 3px;
background: #fff;
margin-bottom: 7px;
}
.row-offcanvas {
position: relative;
bottom: 0;
min-height: 100vh;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-left .sidebar-offcanvas {
left: -85%;
padding: 0 0 0 20px;
background-color: #54565b;
}
.row-offcanvas-left .sidebar-offcanvas ul li {
font-size: 18px;
padding: 15px;
text-transform: uppercase;
border-bottom: 1px solid #696b6f;
}
.row-offcanvas-left .sidebar-offcanvas a {
text-decoration: none;
color: #ffffff;
}
.row-offcanvas-left.active {
left: 85%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
bottom:0;
width: 85%;
}
}