Footer position won't stick to the bottom

Question

I'm trying to get a footer to stick to the bottom of the page along with spacing in between the last div and the footer. I've tried many solutions on stackoverflow but they tend to only "half work" where it would look fine in fullscreen but when I mimic a phone or tablet device, the position is off again.

I can't seem to get Ryans sticky footer to work either. Can anyone help? Here is the example: https://codepen.io/apullz/pen/bWrbxJ

As you can see there is a small gap between the bottom and the light grey footer.

HTML:

<footer>
    <p class="text-muted ">102 Harrow Inn <br />
    Wellington<br />
    SN2 k8S<br />
    Tel:12345678</p>
</footer>

CSS:

html body {
margin:0;
padding:0;
height:100%;
}
footer  
{
width: 100%;
background-color: #efefef;
text-align: left;
bottom:0;
}

Thanks

Answer 1

Added sticky footer code in your code by wrapping the elements before footer in a div <div class="page--wrapper">. I have used 2 approaches to achieve this , now you can choose the best out of it .

Approach 1:

Applying the margin-top:-80px to the wrapper where 80px is height of footer:

.page--wrapper {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -80px;
}

where negative margin is the height of footer element.

Also to remove the gap that was coming because of p tag here is the css:

footer p {
  margin: 0px;
}

Here is the working snippet:

$('.carousel').carousel({});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}


/* Navbar Config Logo  */

.navbar-brand {
  padding: 0;
}

.navbar-brand>img {
  height: 100%;
  padding: 10px;
  width: auto;
}


/* Carousel */

.left {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px
}

.right {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px
}

.carousel-inner {
  border-radius: 10px;
}


/*footer*/

.container {
  min-height: 100%
}

.page--wrapper {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -80px;
}

footer {
  width: 100%;
  background-color: #efefef;
  text-align: left;
}

footer p {
  margin: 0px;
}

@media (max-width:768px){
.page--wrapper {

  margin-bottom: 0px;
}
}

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<script type="text/javascript">
  $(".carousel").carousel({});
</script>
<div class="page--wrapper">
  <nav class="navbar navbar-inverse bg-inverse navbar-static-top">
    <div>
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><img src="img/VB.png" alt="Shoplayout"></a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products
        <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Mods</a></li>
            <li><a href="#">Tanks</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">E-Liquid</a></li>
          </ul>
        </li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </nav>


  <div class="container textcontent">

    <div>
      <h1 class="display-3">What is vaping?</h1><br/>
      <p>
        Vaping is a healthier alternative to smoking cigarettes. Vaping is a booming industry, there are currently 2.2 million people using e-cigarettes as an alternative to smoking.</p>
      <p>
        If you have tried to quit smoking before but keep getting pulled back, why not try the harm reduction method of vaping? Visit The Vape Bar for free advice and an array of great products to help you finally quit!</p>
      <p>
        The Vape Bar has a great selection of e-liquid so you will not struggle to find a flavour that suits you
      </p>
      <p>
        As well as e-liquid we stock the best devices ranging from beginner starter kits to advanced vaping gear.
      </p>
    </div>


    <div class="row-fluid center-block" style="max-width: 30%;">
      <div class="span9" ">
	<div id="myCarousel " class="carousel slide " ">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel " data-slide-to="0 " class="active "></li>
          <li data-target="#myCarousel " data-slide-to="1 "></li>
          <li data-target="#myCarousel " data-slide-to="2 "></li>
        </ol>
        <div class="carousel-inner ">
          <div class="item active ">
            <img src="img/slide1.jpeg " width="100% ">
          </div>
          <div class="item ">
            <img src="img/slide2.jpeg " width="100% ">
          </div>
          <div class="item ">
            <img src="img/slide3.jpeg " width="100% ">
          </div>
        </div>
        <a class="left carousel-control " href="#myCarousel " data-slide="prev " style=" "> <span class="glyphicon glyphicon-chevron-left "></span>
          <span class="sr-only ">Previous</span></a>
        <a class="right carousel-control " href="#myCarousel " data-slide="next " style=" "> <span class="glyphicon glyphicon-chevron-right "></span>
          <span class="sr-only ">Next</span></a>
      </div>
    </div>
  </div>
</div>
</div>



<footer>
  <p class="text-muted ">102 Harrow Inn <br /> Wellington
    <br /> SN2 K8S<br /> Tel:12345678
  </p>
</footer>

Approach 2:

This solution is based on calculating the height of page--wrapper excluding footer using calc() method:

$('.carousel').carousel({});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}


/* Navbar Config Logo  */

.navbar-brand {
  padding: 0;
}

.navbar-brand>img {
  height: 100%;
  padding: 10px;
  width: auto;
}


/* Carousel */

.left {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px
}

.right {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px
}

.carousel-inner {
  border-radius: 10px;
}


/*footer*/

.container {
  min-height: 100%
}

.page--wrapper {
  min-height: calc(100% - 80px);
  
}

footer {
  width: 100%;
  background-color: #efefef;
  text-align: left;
}

footer p {
  margin: 0px;
}

@media (max-width:768px){
.page--wrapper {

  margin-bottom: 0px;
}
}

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<script type="text/javascript">
  $(".carousel").carousel({});
</script>
<div class="page--wrapper">
  <nav class="navbar navbar-inverse bg-inverse navbar-static-top">
    <div>
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><img src="img/VB.png" alt="Shoplayout"></a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products
        <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Mods</a></li>
            <li><a href="#">Tanks</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">E-Liquid</a></li>
          </ul>
        </li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </nav>


  <div class="container textcontent">

    <div>
      <h1 class="display-3">What is vaping?</h1><br/>
      <p>
        Vaping is a healthier alternative to smoking cigarettes. Vaping is a booming industry, there are currently 2.2 million people using e-cigarettes as an alternative to smoking.</p>
      <p>
        If you have tried to quit smoking before but keep getting pulled back, why not try the harm reduction method of vaping? Visit The Vape Bar for free advice and an array of great products to help you finally quit!</p>
      <p>
        The Vape Bar has a great selection of e-liquid so you will not struggle to find a flavour that suits you
      </p>
      <p>
        As well as e-liquid we stock the best devices ranging from beginner starter kits to advanced vaping gear.
      </p>
    </div>


    <div class="row-fluid center-block" style="max-width: 30%;">
      <div class="span9" ">
	<div id="myCarousel " class="carousel slide " ">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel " data-slide-to="0 " class="active "></li>
          <li data-target="#myCarousel " data-slide-to="1 "></li>
          <li data-target="#myCarousel " data-slide-to="2 "></li>
        </ol>
        <div class="carousel-inner ">
          <div class="item active ">
            <img src="img/slide1.jpeg " width="100% ">
          </div>
          <div class="item ">
            <img src="img/slide2.jpeg " width="100% ">
          </div>
          <div class="item ">
            <img src="img/slide3.jpeg " width="100% ">
          </div>
        </div>
        <a class="left carousel-control " href="#myCarousel " data-slide="prev " style=" "> <span class="glyphicon glyphicon-chevron-left "></span>
          <span class="sr-only ">Previous</span></a>
        <a class="right carousel-control " href="#myCarousel " data-slide="next " style=" "> <span class="glyphicon glyphicon-chevron-right "></span>
          <span class="sr-only ">Next</span></a>
      </div>
    </div>
  </div>
</div>
</div>



<footer>
  <p class="text-muted ">102 Harrow Inn <br /> Wellington
    <br /> SN2 K8S<br /> Tel:12345678
  </p>
</footer>

Hope this help.See this on full page.

Answer 2

Add This Code :

footer
 {

    position: absolute;

   /*/ Other Codes /*/
}

Full Code :

html body {
  margin:0;
  padding:0;
  height:100%;
}

footer {
width: 100%;
background-color: #efefef;
text-align: left;
position: absolute;
bottom:0;
}

<footer>
    <p class="text-muted ">102 Harrow Inn <br />
    Wellington<br />
    SN2 k8S<br />
    Tel:12345678</p>
</footer>

Answer 3

Just add footer p { margin-top: 0; } it removes the gap that you see on top of your footer.

html body {
  margin:0;
  padding:0;
  height:100%;
}
.test{
  background-color: lightgrey;
}
footer  {
  width: 100%;
  background-color: darkgrey;
  text-align: left;
  bottom:0;
}
footer p{  
  margin-top:0px;
}

<div class="test">Something something and something too, something, sweet something and something too. Just something... </div>
<footer>
    <p class="text-muted ">102 Harrow Inn <br />
    Wellington<br />
    SN2 k8S<br />
    Tel:12345678</p>
</footer>

Answer 4

Change <p> to <span>. The space below is probably because of <p>'s margin-bottom

<footer>
    <span class="text-muted ">102 Harrow Inn <br />
    Wellington<br />
    SN2 k8S<br />
    Tel:12345678</span >
</footer>

Answer 5

Try to add a position: absolute; on your footer element :

footer  
{
    width: 100%;
    background-color: #efefef;
    text-align: left;
    bottom:0;
    position: absolute;
}

If you want to use left, top, right or bottom, element can't be on static default position.