Q:

Set Footer to Bottom of Page without using Fixed Position. 

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. 

A:

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

