How to get footer always at bottom of the page for different screen resolution

Question

I am building an Angular app in electron. The app opens in full screen. And I have a requirement that footer always remain at bottom of the page. In spite user opening this app in different resolution.

Footer is 'Build was published on 20200309.'

I have attached a picture that shows footer is not exactly at bottom of the page.

Code snippets

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<div class="footer">
  <p>Build was published on 20200309.</p>
</div>

I have tried both the css style but both hasn't worked for me app.component.css

.footer {
    margin-bottom: 0px !important;
}

app.component.css

.footer {
    /* margin-top: 25px; */
    margin-right: 1280px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 160px;
    align-items: flex-end;

}

But when I make footer display flex and when screen resolution changes it doesn't display footer at bottom of the page.

I am not that good in css, can someone help me to get footer sticking bottom of the page aligned to left of the sceen inspite of screen resolution on application window size is changed.

Image 1 shows footer at bottom of screen

Image 2 shows after screen size is changed, you can see footer position is changed

Does this answer your question? [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Marc Hjorth, Sep 03 '20 at 08:23

score 3 · Accepted Answer · answered Sep 03 '20 at 08:55

Just try position: relative & bottom: 0 for this purpose,

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

.footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 160px;
    align-items: flex-end;
    position: relative;
    bottom: 0;
    margin: 0;
}

<div class="main">
  <div style="text-align:center">
    <h1>
      Welcome to Angular!
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  </div>
  <h2>Here are some links to help you start: </h2>
  <ul>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
    </li>
  </ul>

  <div class="footer">
    <p>Build was published on 20200309.</p>
  </div>
</div>

score 2 · Answer 2 · answered Sep 03 '20 at 08:30

Was it necessary? In order to solve your problem, you can use flex rules. I wrapped your content in the parent div main, and set flex rules to it, which will allow your content to stretch across the height of the entire page, and also specified a height of 100vh. Also in the footer class you have the justify-content: flex-end rule, so margin-left 1280px does not make sense.

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

.footer {
    /* margin-top: 25px; */
    /*margin-right: 1280px;*/
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 160px;
    align-items: flex-end;

}

<div class="main">
  <div style="text-align:center">
    <h1>
      Welcome to {{ title }}!
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  </div>
  <h2>Here are some links to help you start: </h2>
  <ul>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
    </li>
  </ul>

  <div class="footer">
    <p>Build was published on 20200309.</p>
  </div>
</div>

score 1 · Answer 3 · answered Sep 03 '20 at 08:42

You can do that using flexbox.

here's the template you will have to mimic in your app.

<div class="main-container">
    <div class="content">content</div>
    <div class="footer">footer</div>
</div>

Your css will look like this:

body, html {
  height: 100%;
  margin: 0;
}
.main-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  background-color: green;
  flex: 1;
}

.footer {
  flex: 0 0 auto;
  height: 100px;
  background-color: red;
}

The hint is that your div content will take the remaining space, leaving your footer at the bottom of the page.

How to get footer always at bottom of the page for different screen resolution

3 Answers3