Need help to make a responsive footer?

Question

Is there a way for the footer to be positioned at the bottom no matter how much content is on the page and the content does not overlap with the footer?

Thank You for all your help

Answer 1

Flexbox might be a solution which is pretty flexible. The footer will always be at the bottom of the page unless there is too much content, then it will just be at the end of the page (thus no "overlapping").

document.getElementById("expand").addEventListener("click", function() { document.getElementById("long").style.display = "block"; });

* {
  box-sizing: border-box;
}
#container {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  height: 100vh;
}
header, footer {
  flex-basis: auto;
  flex-grow: 0;
  padding: 20px;
  background: #ccc;
}
div#content {
  flex-grow: 1;
  padding: 20px;
}
div#long {
  display: none;
}

<div id="container">
  <header>This is the header with auto-height.</header>
  <div id="content">Short Content. <span id="expand"><strong><u>Click here more content!</u></strong></span>
  <div id="long"><img src="http://placehold.it/350x1000"></div></div>
  <footer>This is the footer, and always at the bottom of the window unless there's too much content.</footer>
</div>

Answer 2

A better idea can be utilizing a css framework like twitter-bootstrap. but if you want to achieve that with css only, something like this in your css file will give you what you need:

footer {
    width: 100%;
    bottom: 0;
    position: fixed;     
}

In order to make sure, any content and footer will not overlap you can either set a padding-bottom in your body:

body {
    padding-bottom: 60px;
}

or have a content div which you set its 'margin-bottom':

.content {
    margin-bottom: 60px;
}

jsfiddle