I am trying to flush my footer to the bottom of the page. I have tried the official bootstrap method listed on http://getbootstrap.com/2.3.2/examples/sticky-footer.html which only seems to work on pages that have some amount of content. On pages with a short amount of content, it actually pushes the footer past the bottom of the page and creates scroll bars.
Sorry if the post if done badly. Ive never posted here before and it took me a while to figure it out.
Picture 1 shows the main body and there is no visible footer as it is past the bottom of the page.
<link rel="stylesheet" href="css/bootstrap.css" >
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<link rel="stylesheet" href="fonts/font-awesome.css">
<link rel="stylesheet" href="css/easy-responsive-tabs.css">
<!--JS-->
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/camera.js"></script>
<script>
$(document).ready(function(){
jQuery('.camera_wrap').camera();
});
</script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="js/jquery.mobile.customized.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<div style='text-align:center'><a href="http://windows.microsoft.com/en-US/internet- explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div>
<![endif]-->
<!--[if lt IE 9]><script src="../docs-assets/js/ie8-responsive-file-warning.js"></script><! [endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrap">
<!--header-->
<header>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<h1 class="navbar-brand navbar-brand_"><a href="index.html"><span>Smile Hawthorn</span></a></h1>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 follow-box">
<div class="box2">
<ul>
<li><a href="#" target="new"><button type="button" class="btn btn-book btn-lg">
<span class="fa fa-calendar-header">BOOK ONLINE</button></a></li>
</ul>
<p class="tel"><span class="fa fa-phone-header"></span></p>
</div>
<div class="box1">
<p>Please click <strong>Book Online</strong> or <strong>Call</strong> our clinic for an appointment. </p>
</div>
</div>
</div>
<div class="menu-box">
<nav class="navbar navbar-default navbar-static-top tm_navbar clearfix" role="navigation">
<ul class="nav sf-menu clearfix">
<li><a href="home.html">Home</a></li>
<li class="active sub-menu"><a href="aboutus.html">About Us</a><span></span>
<ul class="submenu">
<li><a href="staff.html">Our Staff</a></li>
<li><a href="values.html">Our Values</a></li>
<li><a href="technology.html">Our Technology</a></li>
</ul>
</li>
<li class="sub-menu"><a href="index-2.html">Services</a><span></span>
<ul class="submenu">
<li><a href="#">Emergency</a></li>
<li><a href="#">Fillings<span></span></a>
<ul class="submenu">
<li><a href="#">Composite</a></li>
<li><a href="#">CEREC</a></li>
<li><a href="#">Amalgam</a></li>
</ul>
</li>
<li><a href="#">Crowns/Caps</a></li>
<li><a href="#">Root Canal</a></li>
<li><a href="#">Whitening</a></li>
<li><a href="#">Wisdom Tooth Removal</a></li>
<li><a href="#">Veneers/Bonding</a></li>
<li><a href="#">Orthodontics</a></li>
</ul>
</li>
<li><a href="index-2.html">F.A.Q</a></li>
<li><a href="index-3.html">Pricing</a></li>
<li><a href="index-4.html">Location</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Content -->
<div class="global indent">
<div class="container">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-2 banner-box2">
<div>
<p class="title" align="center"><span>About Us</span></p><p> </p>
<p class="description" align="center"><a href="staff.html">Our Staff</a></p>
<p class="description" align="center"><a href="values.html">Our Values</a></p>
<p class="description" align="center"><a href="technology.html">Our Technology</a></p>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-10 banner-box2">
<div>
<p class="title">Lorem ipsum dolor sit amet <br>
conse ctetur adipisicing elit, sed <br>
do eiusmod tempor incididunt ut <br>
labore et dolore magn</p>
<p> </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--</div> <!-- end wrap-->
<div id="push"></div>-->
<div id="footer"><!--footer-->
<div class="container">
<div class="row clearfix">
<div class="col-lg-4 col-md-4 col-sm-4"><!-- First Row First Coloumn -->
<p class="text" align="left"><span class="fa fa-home-footer"></span><span class="footer_txt"> testing 123</span></p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4"><!-- First Row First Coloumn -->
<p class="text" align="center"><span class="fa fa-phone-footer"></span><span class="footer_txt"> testing 123</span></p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4"><!-- First Row First Coloumn -->
<div class="col-xs-10 col-sm-8 col-md-8 col-lg-10"> <!-- nested 2 coloumn in First Row -->
<p class="text" align="right"> <span class="fa fa-envelope-footer"></span><span class="footer_txt"><a href="index-5.html"><span style="color: #000;"> Email Us</span></a></span></p>
</div>
</div>
<hr>
<div class="row clearfix">
<div class="col-md-12 column"> <!-- second row -->
</div>
</div>
</div>
</div>
</div><!-- end footer Div -->
<script src="js/bootstrap.min.js"></script>
<script src="js/tm-scripts.js"></script>
</body>
</html>
i used the following CSS
body {
line-height: 1.42857;
font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
height: 100%;
background-color: #ffffff;
font-weight: bold;
}
html{
height: 100%;
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -100px;
}
#push{ /* height must be the same as #footer height */
height: 100px;
}
#footer {
background-color: #FFFFFF;
padding-top: 40px;
padding-right: 0;
padding-left: 0;
background-position: top;
left: 0px;
bottom: 0px;
height: 100px;
background-image: url(../img/footer.jpg);
background-repeat: repeat;
}
The easiest way I know of to push down the footer in all cases is the following:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
}
footer {
height: 100px;
}