Footer is not in the bottom on high resolution

Question

I have a footer with the below HTML and CSS code, when I view the page on my resolution (1366x768), everything looks okay. But when using a higher resolution device (1920x1080), the footer is not fixed to the bottom and is instead above the bottom (near to the middle of page). I used Chrome Zoom and it appears that the footer moves along with all elements in the page.

.footer {
  font-size: calc(16px - 2px);
  line-height: 1.1;
  color: #999;
  margin-bottom: 5px;
  text-align: center;
 background-color: #fff;
 padding: calc(8px * 1.5) 0;
}

</div> <!--/.container-->
<footer class="footer container">
  <div class="container-inner">
    <p> <a href="http://example.org" target="_blank">Name, Inc.</a> Copyright ©2020 </p>
  </div>
</footer>

Is there a way to make the footer appear on the bottom (on all resolutions) and not move with other elements? It feels loose.

Is it because there isn't enough content on your page to push it down? You could use `position: fixed` but that will make it stay on the bottom of the viewport and overlap content as you scroll. Post a little more of your HTML structure. — disinfor, Feb 26 '20 at 16:58
What is the CSS of elements above? Most likely you have floating elements above or elements are displayed as inline-blocks. — Roman, Feb 26 '20 at 16:59
Does this answer your question? [How to align footer (div) to the bottom of the page?](https://stackoverflow.com/questions/3525581/how-to-align-footer-div-to-the-bottom-of-the-page) — Ahmed Tag Amer, Feb 26 '20 at 17:06

score 1 · Answer 1 · answered Feb 26 '20 at 18:02

Using flexbox we can easily keep the footer at the bottom by wrapping our content, footer, and optionally a header in a flex container with flex-direction: column; and min-height: 100vh while setting the content to flex-grow: 1. The default for flex-grow is 0 so we don't have do anything with our footer (although I did center it with align-self: center).

I have also added a toggle to show an increased content view as proof that the footer will flow with the content while remaining at the bottom when the content by itself doesn't fill the #content.

#container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  align-self: center;
}

#content {
  flex-grow: 1;
  padding: 1rem;
  border-bottom: 1px solid grey;
}

.to-bottom {
  margin-top: 110vh;
}

<div id="container">
  <div id="content">
    <label for="toggle-height">Force Scroll: </label><input id="toggle-height" type="checkbox" onclick="document.querySelector('p:nth-of-type(2)').classList.toggle('to-bottom')"/>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, corporis! Sunt ducimus impedit, dolor id ipsa aliquid in necessitatibus labore! Iste laboriosam eos eligendi vel repellendus, blanditiis accusamus vitae ipsam!</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, corporis! Sunt ducimus impedit, dolor id ipsa aliquid in necessitatibus labore! Iste laboriosam eos eligendi vel repellendus, blanditiis accusamus vitae ipsam!</p>
  </div>
  <footer>&copy; My Site</footer>
</div>

alessandro davoli · Answer 2 · 2020-02-27T15:58:24.347

Just give the content element that is before footer a calculated min-height (taking all the elements' fixed height into account). If you post the complete html code it would be easier to help you...

[edit] Example code -> assuming to have a header of 80px height (that isn't contained inside div.content) and a footer of 100px height, you can give the container a min-height equal to viewport height (vh) minus 180px (80px of the header + 100px of the footer):

.header
{
  height:80px;
}

.footer
{
  height:100px;
}

.container
{
  min-height:calc(100vh - 180px); 
}

for a html page code that would look like that:

<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>

If you want to keep header and footer with no fixed height than just use flex-box (this require a wrapper element, it could be the , too):

.flex-wrapper
{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header
{
  // whatever
}

.footer
{
  // whatever
}

.container
{
  flex:1; 
}

this will work with this html structure:

<div class="flex-wrapper">
  <div class="header"></div>
  <div class="container"></div>
  <div class="footer"></div>
</div>

This is better as a comment and will most likely get down voted - since it offers no code solution and since we do not have any idea what the rest of the HTML looks like. — disinfor, Feb 26 '20 at 17:16
Yeah @disinfor you're right, but I've not enough reputation to post comment... ^_^ — alessandro davoli, Feb 27 '20 at 08:33
Then at least post code to your answer with the little HTML/CSS that the OP provided. — disinfor, Feb 27 '20 at 13:42

score 0 · Answer 3 · answered Feb 26 '20 at 17:34

Try this:

html, body {margin:0; padding:0}

.footer {
  font-size: calc(16px - 2px);
  line-height: 1.1;
  color: #999;
  margin-bottom: 5px;
  text-align: center;
  background-color: #ccc;
  padding: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
}

<footer class="footer container">
  <div class="container-inner">
    <p> <a href="http://example.org" target="_blank">Name, Inc.</a> Copyright ©2020 </p>
  </div>
</footer>

Reference: https://www.w3schools.com/cssref/pr_pos_bottom.asp

While this may answer the question, explain why and what code you added instead of an offsite link. — disinfor, Feb 26 '20 at 18:17

Footer is not in the bottom on high resolution

3 Answers3