CODEWITHSUNDEEP
phphtmlcsstwitter-bootstrapsticky-footer
xyzzz
xyzzz

Reputation: 1543

Sticky footer with bootstrap 3.x not working

I am trying to implement the sticky footer for bootstrap but it is not working for me. I have a header.php and a footer.php which I include in every page of my website. I saw a various posts here for the sticky footer but it doesn't seem to work for me. I saw an example to add a and a to the body of my page and modify the css accordingly but it doesnt seem to work. Please find my code below:

webpage.php

<?php
require_once "../includes/essentials.php";
include "../includes/header.php";
?>

<div id="wrap">
<div id="main" class="container">
   Content


<?php include "../includes/footer.php"; ?>

</div>
</div>

Footer.php 

<html>
<body>
<div class="footer">
<div class="container">
        <div class="row clearfix">
                <div class="col-md-12 column">
                 Content
                </div>
        </div>
        <div class="row clearfix">
                <div class="col-md-12 column">
                 Content
                </div>
        </div>
        <div class="row clearfix">
                <div class="col-md-12 column">
                Compatible with <a href="http://www.firefox.com">Firefox</a> and <a href="http://www.chrome.com">Chrome</a>.
                </div>
        </div>
</div>
</div>
</body>
</html>

style.css

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%;
  margin: 0 auto;
  min-width: 1000px;
}

.main {
  overflow:auto;
  padding-bottom:200px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
  bottom:0;
}

How do i fix this? I want the footer to stick at the bottom of the page even if content gets over before half of the webpage.

Upvotes: 1

Views: 1957

Answers (2)

pstenstrm
pstenstrm

Reputation: 6489

In the CSS you select .main as a class but in the html you've put is as an ID <div id="main">.

Secondly the <div class="footer"> should be outside of #wrap, as a sibling and not a child. 

<div id="wrap">
    <div id="main">
        // <div id="contnainer"...
    </div>
</div>
<div class="footer">
    // <div id="contnainer"...
</div>

Upvotes: 1

Ben
Ben

Reputation: 5414

A quick fix to your problem is to use a NavBar as a footer, and simply fill it with the content you'd like in it.

Bootstrap Components provides the JS for the NavBar to stick to the top or bottom of the screen.

You can read about it here

Upvotes: 0

Related Questions