CSS: how to attach footer to the bottom of the page

Question

I want to attach Footer to the bottom of the page. To do so I used Absolute position in css as recommended in other similar topics. But for unknown reason the footer behaves as if it is Fixed, not Absolute.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}

header {
  background: rgba(150, 150, 150, 0.5);
  border-bottom: solid 1px;
  width: 100%;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

main {
  padding-top: 5px;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 60px;
}

footer {
  border-top: solid 1px;
  background: rgba(150, 150, 150, 0.5);
  width: 100%;
  height: 40px;
  padding-top: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Index</title>
</head>

<body>
  <header>
    This is header
  </header>

  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
  </main>

  <footer>
    This is footer
  </footer>
</body>

</html>

Screen 1: Screen 2:

The footer should stick with the lower edge of the page, instead it remains stick with the lower edge of the browser. What's wrong?

http://plnkr.co/edit/o5aTdu4iLGSVIWxi3sUu Check this out. Just remove 3 CSS rules and let footer move naturally to the bottom of the page — Bramastic, May 30 '17 at 09:17
@thebluefox because if the content doesn't fill the screen, then the footer won't be at the bottom of the viewport, I think OP is wanting a sticky footer that will be at the bottom of the content or bottom of the screen, whichever is bigger — Pete, May 30 '17 at 09:26
@sva605 although my answer below answers this question, it may cause you issues as you will need to add bottom padding to the body for the height of the footer (otherwise your footer may overlap some content) - [see this answer](https://stackoverflow.com/questions/23651942/css-single-column-layout-centered-fixed-width-100-height-w-header-and-footer/23657083#23657083) for some good alternates for how to do a sticky footer depending on what browsers you need to support: — Pete, May 30 '17 at 09:36

score 8 · Accepted Answer · answered May 30 '17 at 09:20

You have set a height of 100% on your body, therefore your body will only ever be as high as the viewport. Try using min-height for the body (also add position relative to body):

html {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}

header {
  background: rgba(150, 150, 150, 0.5);
  border-bottom: solid 1px;
  width: 100%;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

main {
  padding-top: 5px;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 60px;
}

footer {
  border-top: solid 1px;
  background: rgba(150, 150, 150, 0.5);
  width: 100%;
  height: 40px;
  padding-top: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Index</title>
</head>

<body>
  <header>
    This is header
  </header>

  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
  </main>

  <footer>
    This is footer
  </footer>
</body>

</html>

score 5 · Answer 2 · answered May 30 '17 at 09:28

5

If you can use flexbox, than that is your solution. Look here on the css tricks - you don't need more. https://css-tricks.com/couple-takes-sticky-footer/

HTML:

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS:

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}

answered May 30 '17 at 09:28

Samuell

215
2
5

1

this is the right answer. – onlycparra Oct 13 '21 at 09:45

Pawan Kumar · Answer 3 · 2017-05-30T09:36:11.397

No need to specify the position for footer, also remove the bottom and left. You need to specify the height(in %) of every section. Try with below CSS,

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}

header {
 height:10%;
 background: rgba(150,150,150,0.5);
 border-bottom: solid 1px;
 width: 100%;
 text-align: center;
 padding-top: 20px;
 padding-bottom: 20px;
}

main {
height:80%;
padding-top: 5px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}

footer {
height:10%;
border-top: solid 1px;
background: rgba(150,150,150,0.5);
width: 100%;
height: 40px;
padding-top: 10px;
text-align: center;   
}

Here, if the screen size in big or if someone zoom out the screen or if content in the page is very less, the footer will always remain at the bottom of the page.

Sidhin S Thomas · Answer 4 · 2022-04-01T20:01:27.493

I found that the best way to do that is via flex.

Ensure body/root or whatever is the 100% container is display:flex You can make it more or less not impactful depending on rest of your CSS by using flex-direction:column.

Once that's done create a footer container by something like-

<div id="footer">
   <span>my footer text </span>
<div>

Now make this container column flexbox as well with flex-grow:2 which ensures it will consume all of the remaining vertical space. Then justify the content to flex end such that it will stick to the bottom.

#footer {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 2;
}

This ensures if the content doesn't cover full height, footer stays at bottom. If content is bigger than viewport height, it scolls and stays at the end of content without additional space.

Everything together -

html {
  height:90% /* quiriness of iframe used here */
}

body {
  height:100%;
  display:flex;
  flex-direction: column;
}

#footer {
  display:flex;
  flex-direction:column;
  flex-grow:2;
  justify-content:flex-end;
}

<div>
  Hello World
</div>


<div id="footer">
  <span>my footer<span>
</div>

CSS: how to attach footer to the bottom of the page

4 Answers4