Set Footer to Bottom of Page without using Fixed Position.

Question

This is driving me crazy I cannot work out why my footer appearing at different heights even though it is defined in the _Layout view. I have the following css:

.footer {
    position: absolute;
    bottom: 0;
    background-color: #ffd800;
    width: 100%;
    text-align: center;
    left: 0;
    background-image: url(/Content/SiteImages/logosmall.png);
    background-repeat: no-repeat;
    height: 110px;
    border-top: 3px solid #082603;
}

    .footer p {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        color: #082603;
        font-size: 150%;
        font-family: 'Baskerville Old Face'
    }

HTML:(_Layout)

 <div class="container body-content">
        @RenderBody()

        <div class="footer"><p>Quote</p> </div>

    </div>

How can I get the div to stay at the very bottom of the page. I want it to be under below all content. not covering any so if I add another div the foot will always be a footer. Example of my problem:

What I want:

Please help me get this consistent across my multiple pages. I have looked at lots of questions on stackoverflow but none or resolving the issue.

Possible duplicate of ["CSS for Fixed Footer"](https://stackoverflow.com/questions/13788357/css-for-fixed-footer), ["Fix footer to bottom of page"](https://stackoverflow.com/questions/18915550) and [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294) — adiga, Oct 16 '17 at 20:04

UncaughtTypeError · Accepted Answer · 2017-10-16T20:10:42.950

You would need to position your footer fixed, then offset its height (110px) from the bottom of the body or containing element (since it is taken out of the normal document flow), e.g: .container.body-content {padding-bottom: 110px;}

.container.body-content {
    padding-bottom: 110px;
    height: 1000px; /* Force height on body */
}

.footer {
  position: fixed;
  bottom: 0;
  background-color: #ffd800;
  text-align: center;  
  right: 0;
  left: 0;
  background-image: url(/Content/SiteImages/logosmall.png);
  background-repeat: no-repeat;
  height: 110px;
  border-top: 3px solid #082603;
}

.footer p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #082603;
  font-size: 150%;
  font-family: 'Baskerville Old Face'
}

<div class="container body-content">

  <div class="footer">
    <p>Quote</p>
  </div>

</div>

Varying Footer Height (Responsive Concern)

If the footer height varies based on the width of the screen, refer to this answer: Keeping footer at bottom of responsive website

And the solution demonstrated in this CodePen: https://codepen.io/anon/pen/BoNBZX

No Fixed Footer

But if you need an absolute positioned footer, add position: relative to the containing element (.container.body-content), so that the bottom: 0 value of .footer is always relative to .container.body-content.

.container.body-content {
    height: 1000px; /* Force height on body */
    position: relative;
}

.footer {
  position: absolute;
  bottom: 0;
  background-color: #ffd800;
  text-align: center;  
  right: 0;
  left: 0;
  background-image: url(/Content/SiteImages/logosmall.png);
  background-repeat: no-repeat;
  height: 110px;
  border-top: 3px solid #082603;
}

.footer p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #082603;
  font-size: 150%;
  font-family: 'Baskerville Old Face'
}

<div class="container body-content">

  <div class="footer">
    <p>Quote</p>
  </div>

</div>

Edit: position: absolute alternative version included

Thank you the position: absolute solved it perfectly – Phil3992 Oct 16 '17 at 20:13 — Phil3992, Oct 16 '17 at 20:13

score 3 · Answer 2 · answered May 28 '18 at 16:02

Another way is to give the main wrapper a minimum height, which will push the footer down. That minimum height should be the height of the screen minus other heights (footer's, nav's etc. heights). Fiddle here.

HTML:

<body>
<div id="header">Nav area</div>
<div id="main">Main content to be here</div>
<div id="footer">Footer be here</div>  
</body>

CSS:

#header{
  height:30px
}
#main{
  min-height:calc(100vh - 60px);
}
#footer{
  height:30px;
}

score 0 · Answer 3 · answered Oct 16 '17 at 19:59

0

use position: fixed instead of position: absolute for the .footer css

answered Oct 16 '17 at 19:59

akerra

1,017
8
18

I have tried that. It makes the footer float when I scroll so it constantly stay in the middle of the page – Phil3992 Oct 16 '17 at 20:00
Whats the CSS? for .body-content – Julian Espinosa Oct 16 '17 at 20:01
change `bottom: 0` and `left: 0` to `bottom: 0px` and `left: 0px` – akerra Oct 16 '17 at 20:02
the use `position: relative` but be aware that if your body doesn't take up at least the height of the screen, it will look pretty weird – akerra Oct 16 '17 at 20:06
@Akerra Then just consider your main content section as having a min height. This way a very small page with little content won't look too squished. – Greg Oct 16 '17 at 20:11

alisa.smith · Answer 4 · 2017-10-24T15:48:33.730

change the position to

.footer {
    position: relative;
    bottom: 0;
    background-color: #ffd800;
    width: 100%;
    text-align: center;
    left: 0;
    background-image: url(/Content/SiteImages/logosmall.png);
    background-repeat: no-repeat;
    height: 110px;
    border-top: 3px solid #082603;
}

The best thing to do is to put your header,main content and your footer in a div tag as a place for your elements in a web page than put them in a it's normal flow like working on footer tag at end of the page.

Set Footer to Bottom of Page without using Fixed Position.

4 Answers4