Keeping footer at bottom of responsive website

Question

i would like to make my footer always show at the bottom of the pages and not move up when there is little page content. I tried

body, html {
height: 100%}

html body.wide #wrapper.container {
min-height: 100%;
position: relative;
padding-bottom: 226px!important;/*Footer height*/
}

#containerfooter {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

but since my site is responsive, the footer height varies and this code will hide content on some pages. Is there any way to make this work?

Answer 1

If the footer height varies based on the width of the screen, fixing it to the bottom of the viewport or screen won't be the solution.

I get the impression that content in the footer will wrap or collapse below each other as the screen size decreases, so rather set a minimum height on whichever element wraps the page content.

A Code Pen Example

$("#addBodyContent").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".page-wrap .content");
});

$("#addFooterContent").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".site-footer .content");
});

* {
  margin: 0;
}
html,
body {
  height: 92%;
  font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
}
.page-wrap {
  min-height: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer {
  background: black;
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 100px;
  text-align: center;
  padding: 10px;
  color: white;
  box-sizing: border-box;
}
button.dark:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
button.dark {
  background-color: black;
  border: 3px solid black;
  padding: 10px 30px;
  color: white;
  cursor: pointer;
  transition: .7s;
}
button.light:hover {
  background-color: #CCCCCC;
}
button.light {
  background-color: white;
  border: 3px solid white;
  padding: 10px 30px;
  color: black;
  cursor: pointer;
  transition: .7s;
}
.content p {
  margin-bottom: 10px;
}
.content {
  border-top: 1px solid black;
  padding-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">

  <h1>Header</h1>
  <br>

  <button id="addBodyContent" class="dark">Add Content</button>
  <br>
  <br>
  <div class="content"></div>
</div>

<footer class="site-footer">
  <h2>Footer</h2>
  <br>
  <button id="addFooterContent" class="light">Add Content</button>
  <br>
  <br>
  <div class="content"></div>
</footer>

Answer 2

Use position: fixed. In #containerfooter

#containerfooter {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
 }

for "sticky footer" see this tutorial