title: Set Footer to Bottom of Page without using Fixed Position.
body: <p>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:</p>
  <pre><code>.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'
      }
  </code></pre>
  <p>HTML:(_Layout)</p>
  <pre><code> &lt;div class=&quot;container body-content&quot;&gt;
          @RenderBody()
  
          &lt;div class=&quot;footer&quot;&gt;&lt;p&gt;Quote&lt;/p&gt; &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  <p>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:</p>
  <p><a href="https://i.stack.imgur.com/PS9RR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PS9RR.png" alt="enter image description here" /></a></p>
  <p>What I want:</p>
  <p><a href="https://i.stack.imgur.com/PZQDy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PZQDy.png" alt="enter image description here" /></a></p>
  <p>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.</p>