footer will not stick on bottom of page

Question

I am trying to create a page on where i try to let the footer stick at the bottom of the page. It will stick but the problem is that if the browser will be minimized that the footer will go through the content of the page, but actually i want that it stays at the bottom of the page and when the browser is minimized that there will be a scroll bar.

A picture what happens when browser is minimized:

If the browser is big enough then it is ok:

This also happens with the menu:

Can anyone hint me which settings are wrong? I use this setup:

<div id="wrapper">
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
</div>

This is the code:

https://jsfiddle.net/k6ocuw69/1/

Thanks for help

Answer 1

you need to use position:fixed

check the fiddle here

EDIT: ok, maybe i understood wrong when you said "fixed". try this and see if this is what you were looking for. you can add text to content and it should still not be overlapped by your footer.

Answer 2

Was this what you were trying to achieve?

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 5rem;
  min-height: 100%;
  background-color: #f2f2f2;
}

.header {
  width: 100%;
  padding: 10px 0;
  margin-bottom: 20px;
  background-color: grey;
  text-align: center;
}

.header h3 {
  margin: 0;
  color: white;
}

.content {
  background-color: #ffffff;
  margin: 0 auto;
  padding: 20px 15px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: grey;
  text-align: center;
}

<div class="header">
  <h3>This is the header</h3>
</div>

<div class="content">
  <h1>Footer example</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong> is not fixed</strong>.</div>

Your demo had so much stuff that it was easier for me to do a totally new example from the scratch but this should be easily implemented to any stucture.

Note: You need to set the padding-bottom: 5rem; to body according to your footer height.

Fiddle to play with: https://jsfiddle.net/thepio/rfy0a4Lt/

Answer 3

• Remove bottom padding from wrapper
• Fix those <h2>...</h4>
• footerFirstColumn div is taller that your footer, increase footer height

That's the result https://jsfiddle.net/8odoros/k6ocuw69/5/

Answer 4

You can accomplish this with the following code:

HTML

<div class="wrapper">
  <header class="header">
    <h1>Page header</h1>
  </header>

  <section class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus mauris, egestas in eleifend sed, sagittis nec dolor. Cras auctor arcu ex. Quisque porttitor, dui vitae hendrerit pharetra, velit ante aliquet nisl, in malesuada diam arcu commodo mi. Sed aliquam nisi leo, a rhoncus enim volutpat ultricies. Etiam vitae nisi sit amet lectus fermentum dignissim. Cras ultricies nibh eu ipsum laoreet, vitae varius turpis varius. Donec hendrerit purus nec tortor suscipit commodo. Mauris metus arcu, viverra lacinia dapibus a, egestas vitae mauris. Nam ut faucibus ligula, vitae rhoncus massa. Proin non porttitor nibh. Aenean consequat est ac tortor lacinia suscipit in nec neque. Fusce semper ipsum ac felis interdum mollis. Proin faucibus ex non condimentum laoreet. Praesent sem sem, convallis sed enim vitae, suscipit finibus tortor.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus mauris, egestas in eleifend sed, sagittis nec dolor. Cras auctor arcu ex. Quisque porttitor, dui vitae hendrerit pharetra, velit ante aliquet nisl, in malesuada diam arcu commodo mi. Sed aliquam nisi leo, a rhoncus enim volutpat ultricies. Etiam vitae nisi sit amet lectus fermentum dignissim. Cras ultricies nibh eu ipsum laoreet, vitae varius turpis varius. Donec hendrerit purus nec tortor suscipit commodo. Mauris metus arcu, viverra lacinia dapibus a, egestas vitae mauris. Nam ut faucibus ligula, vitae rhoncus massa. Proin non porttitor nibh. Aenean consequat est ac tortor lacinia suscipit in nec neque. Fusce semper ipsum ac felis interdum mollis. Proin faucibus ex non condimentum laoreet. Praesent sem sem, convallis sed enim vitae, suscipit finibus tortor.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus mauris, egestas in eleifend sed, sagittis nec dolor. Cras auctor arcu ex. Quisque porttitor, dui vitae hendrerit pharetra, velit ante aliquet nisl, in malesuada diam arcu commodo mi. Sed aliquam nisi leo, a rhoncus enim volutpat ultricies. Etiam vitae nisi sit amet lectus fermentum dignissim. Cras ultricies nibh eu ipsum laoreet, vitae varius turpis varius. Donec hendrerit purus nec tortor suscipit commodo. Mauris metus arcu, viverra lacinia dapibus a, egestas vitae mauris. Nam ut faucibus ligula, vitae rhoncus massa. Proin non porttitor nibh. Aenean consequat est ac tortor lacinia suscipit in nec neque. Fusce semper ipsum ac felis interdum mollis. Proin faucibus ex non condimentum laoreet. Praesent sem sem, convallis sed enim vitae, suscipit finibus tortor.</p>
  </section>

  <footer class="footer">
    Page Footer
  </footer>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

.wrapper {
  background-color: red;
  height: 100vh;
}

.header {
  background-color: blue;
  height: 10vh;
}

.content {
  background-color: yellow;
  height: 80vh;
  overflow-y: scroll;
}

p {
  font-size: 200%;
}

.footer {
  background-color: green;
  height: 10vh;
}

Codepen link