CODEWITHSUNDEEP
htmlcss
mr_incredible
mr_incredible

Reputation: 1115

Keep footer at the bottom (footer doesn't have to move with scroll)

I'm trying to give my page extra height with:

html {
    height: 1000px;
}

which does what I want but I've got problem with the footer. I want it at the bottom but I don't necessarily want it to move with scroll. Meaning, user has to scroll down to see the footer.

This is what I've got:

html:

<footer class="footer">
   <p>...</p>
</footer>

css:

footer {
    position: fixed;
    background-color: #00cca3;
    bottom: 0;
    height: 80px;
    padding-bottom: 20px;
    width: 100%;
  }

when I change position to relative the footer is in the middle of screen because it's being positioned relative to other elements. Not good.

How can I achieve a footer at the bottom of the screen without having it to move along with scroll ?

Upvotes: 0

Views: 1896

Answers (3)

user12077300
user12077300

Reputation:

you need to use position:fixed and set the top and right the right position.it will not move anyway.

Upvotes: 1

ROOT
ROOT

Reputation: 11622

You might consider using grid layout, with align-content:space-between, here is a working snippet:

html, body {height: 100%}

body {
  display: grid;
  align-content: space-between; 
  margin: 0;
}

footer {background: #CCC}
<div>Content</div>
<footer class="footer">
   <p>This is footer!</p>
</footer>

Upvotes: 0

Manjuboyz
Manjuboyz

Reputation: 7066

Use position:relative; to body and position:absolute; to footer.

body {
  height: 1000px;
  border: 1px solid red;
  position: relative;
}

footer {
  position: absolute;
  background-color: #00cca3;
  bottom: 0;
  height: 80px;
  padding-bottom: 20px;
  width: 100%;
}
<footer class="footer">
  <p>...</p>
</footer>

Upvotes: 1

Related Questions