Set Footer to Bottom of Page without using Fixed Position.

html css asp.net-mvc twitter-bootstrap

15,475

Solution 1

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

Solution 2

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;
}

15,475

Phil3992

University Graduate in Hardware and Software Engineering. Android hobbyist. Check out my apps here: https://play.google.com/store/apps/developer?id=Phil3992

Updated on June 04, 2022

Comments

Phil3992 almost 2 years
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.
- adiga over 6 years
  
  Possible duplicate of "CSS for Fixed Footer", "Fix footer to bottom of page" and How do you get the footer to stay at the bottom of a Web page?
Phil3992 over 6 years

I have tried that. It makes the footer float when I scroll so it constantly stay in the middle of the page
Julian Espinosa over 6 years

Whats the CSS? for .body-content
akerra over 6 years

change bottom: 0 and left: 0 to bottom: 0px and left: 0px
akerra over 6 years

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
Greg over 6 years

@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.
Phil3992 over 6 years

Thank you the position: absolute solved it perfectly
UncaughtTypeError over 6 years

Glad to hear it!