I'm trying to make footer sticky. Meaning, when I zoom out of page, I want my footer to stick to bottom.

Tried to add flex but didn't work.

My code:

:host {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.links-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  background-color: map.get($primary-dark, 10);
}

.links {
  display: flex;
  justify-content: space-between;
  min-width: 500px;
}

.horizontal-separator {
  width: 1px;
  background-color: map.get($typography-grey, 100);
}

.footer-links {
  color: map.get($typography-grey, 100);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.copyright-container {
  width: 100%;
  height: 60px;
  background-color: map.get($primary-dark, 20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright-wrapper {
  width: 1140px;
}

.copyright {
  font-size: 12px;
  color: map.get($typography-grey, 100);
}

.top-btn {
  background-color: map.get($secondary-red, 100);
  width: 86px;
  height: 60px;
  border-radius: 0;
  position: absolute;
  right: 0;
}

@media (max-width: $x-small-max) {
  .footer-links {
    padding: 0 4px;
  }
  .copyright {
    margin-left: 8px;
  }
  .links {
    justify-content: space-around;
    width: 100%;
    min-width: 0;
  }
}

<div >
  <div >
    <div >
      <a href="/contact-us" >Contact Us</a>
      <div ></div>
      <a >Terms and Condition</a>
      <div ></div>
      <a  href="/">Privacy policy</a>
    </div>
  </div>
  <div >
    <div >
      <p >Other</p>
    </div>
    <button (click)="toTop()" mat-flat-button color="primary" >
          Top
        </button>
  </div>
</div>

I tried to add flex: 1 0 auto; to .footer-container but it didn't help.

Also tried flex-shrink: 0;

Before that, I did position:absolute and position:fixed. It did fix the issue but made footer visible over other divs. Displaying example below

Example

CodePudding user response：

Add possiton: fixed; and bottom: 0; to .footer-container style:

.footer-container {
   position: fixed;
   bottom: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
}

CodePudding user response：

Add the following CSS:

.footer-container {
  position: fixed;
  bottom: 0;
}

See the snippet below.

:host {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 0;
}

.links-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  background-color: map.get($primary-dark, 10);
}

.links {
  display: flex;
  justify-content: space-between;
  min-width: 500px;
}

.horizontal-separator {
  width: 1px;
  background-color: map.get($typography-grey, 100);
}

.footer-links {
  color: map.get($typography-grey, 100);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.copyright-container {
  width: 100%;
  height: 60px;
  background-color: map.get($primary-dark, 20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright-wrapper {
  width: 1140px;
}

.copyright {
  font-size: 12px;
  color: map.get($typography-grey, 100);
}

.top-btn {
  background-color: map.get($secondary-red, 100);
  width: 86px;
  height: 60px;
  border-radius: 0;
  position: absolute;
  right: 0;
}

<div >
  <div >
    <div >
      <a href="/contact-us" >Contact Us</a>
      <div ></div>
      <a >Terms and Condition</a>
      <div ></div>
      <a  href="/">Privacy policy</a>
    </div>
  </div>
  <div >
    <div >
      <p >Other</p>
    </div>
    <button (click)="toTop()" mat-flat-button color="primary" >
      Top
    </button>
  </div>
</div>

CodePudding user response：

I just applied the answer from this question (mentioned in comments below your question): How to make a sticky footer using CSS?

html {   /*ADDED*/
    position: relative;
    min-height: 100%;
}
body {  /*ADDED*/
    margin: 0 0 100px; /* bottom = footer height */
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 0;
  /*ADDED*/
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  /*ADDED*/
}

It works fine, so it looks like a duplicate...

Demo with text:

:host {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

html{
  position:relative;
}
html {   /*ADDED*/
    position: relative;
    min-height: 100%;
}
body {  /*ADDED*/
    margin: 0 0 100px; /* bottom = footer height */
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 0;
  /*ADDED*/
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  /*ADDED*/
}

.links-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  background-color: map.get($primary-dark, 10);
}

.links {
  display: flex;
  justify-content: space-between;
  min-width: 500px;
}

.horizontal-separator {
  width: 1px;
  background-color: map.get($typography-grey, 100);
}

.footer-links {
  color: map.get($typography-grey, 100);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.copyright-container {
  width: 100%;
  height: 60px;
  background-color: map.get($primary-dark, 20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright-wrapper {
  width: 1140px;
}

.copyright {
  font-size: 12px;
  color: map.get($typography-grey, 100);
}

.top-btn {
  background-color: map.get($secondary-red, 100);
  width: 86px;
  height: 60px;
  border-radius: 0;
  position: absolute;
  right: 0;
}

<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dictum congue augue, ut eleifend mi tempus id. Vestibulum erat sapien, mollis eu enim quis, sollicitudin molestie lacus. Aenean luctus aliquam nisl sit amet placerat. Sed ut sodales justo. Vestibulum sit amet mi vitae justo vehicula condimentum ut sed enim. Ut in nunc vel ante malesuada convallis. Proin dolor quam, vehicula vehicula vestibulum eget, efficitur vitae turpis. Duis ac elit eleifend, volutpat quam a, blandit libero. Nulla varius pharetra nibh vel elementum. Maecenas aliquam lorem luctus erat efficitur dictum. Nam quis orci ipsum. Quisque at accumsan lacus. Fusce imperdiet, lorem sed sagittis vehicula, est augue rhoncus justo, sit amet imperdiet lorem libero ac urna. Nam in libero ut nibh iaculis maximus. Pellentesque dictum gravida purus aliquam pharetra.

Integer nisi massa, commodo vitae lectus vel, eleifend vestibulum ligula. Nulla mattis, risus non dignissim dapibus, ligula eros tristique nibh, at malesuada magna tortor accumsan velit. Suspendisse leo diam, mattis sit amet quam quis, viverra faucibus erat. Donec suscipit, urna non aliquam molestie, purus mauris gravida orci, at luctus turpis dolor sit amet turpis. Nullam feugiat, mi et convallis scelerisque, augue libero egestas massa, a posuere tellus mauris sit amet diam. Nullam feugiat pharetra neque eu rutrum. Praesent sed condimentum lacus. Nulla quis dictum quam, non facilisis justo. Curabitur libero quam, vulputate sit amet tortor id, suscipit sodales nunc. Vivamus feugiat lorem eu metus tempor malesuada. Proin placerat ac mi eget aliquam. Maecenas euismod odio sem, sit amet ultrices nulla ultricies nec. Etiam vulputate pharetra dui, at rhoncus metus cursus a. Aenean dui arcu, gravida et quam eu, eleifend pretium magna.

Praesent quis porttitor lectus. Sed ut sagittis libero, quis dignissim ipsum. Phasellus nec diam nibh. Cras vitae felis sit amet nisi sollicitudin tincidunt in nec eros. Proin vitae urna accumsan, porta nisi a, aliquam sem. Integer vulputate vitae eros accumsan lacinia. Fusce sit amet elit vitae ipsum ultricies sollicitudin. Nunc vestibulum lectus ligula, quis consequat nulla aliquet quis. Etiam varius, felis quis eleifend vestibulum, purus nunc lacinia nibh, eget feugiat neque neque a purus. Morbi tincidunt justo in elementum sodales. Duis euismod erat et odio aliquet, id semper orci varius. Quisque nisi mauris, scelerisque ac dignissim in, posuere a nunc.

Nullam auctor ultricies odio, eu fermentum velit imperdiet ut. Maecenas maximus elit nunc, eget sagittis velit dictum rhoncus. Cras rhoncus euismod cursus. Pellentesque gravida felis eget tortor fringilla commodo. Curabitur id molestie nisl. Curabitur mi purus, tristique a ex vitae, tincidunt luctus metus. Vivamus suscipit magna at ligula ornare, vitae finibus felis condimentum. Maecenas in vestibulum arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin malesuada ex quis laoreet pretium. Mauris porttitor, nibh a cursus aliquet, lorem quam consequat augue, in mattis mauris neque vel enim. Donec imperdiet lorem ligula, in posuere mauris facilisis in.

Duis vitae felis maximus, egestas odio accumsan, bibendum massa. Phasellus aliquet nec arcu nec malesuada. Etiam ultrices dui et justo dignissim, sed egestas nisi maximus. Mauris tristique scelerisque urna vel tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque egestas velit id leo laoreet, id vestibulum eros convallis. In consectetur lacus id ex tincidunt aliquam. Quisque ante tortor, ultrices et malesuada quis, dignissim ut felis. Sed dapibus urna nisi, vitae sodales quam facilisis eu. Praesent rutrum eros non odio convallis tincidunt.
</main>

<div >
  <div >
    <div >
      <a href="/contact-us" >Contact Us</a>
      <div ></div>
      <a >Terms and Condition</a>
      <div ></div>
      <a  href="/">Privacy policy</a>
    </div>
  </div>
  <div >
    <div >
      <p >Other</p>
    </div>
    <button (click)="toTop()" mat-flat-button color="primary" >
      Top
    </button>
  </div>
</div>

DEMO without text:

:host {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

html{
  position:relative;
}
html {   /*ADDED*/
    position: relative;
    min-height: 100%;
}
body {  /*ADDED*/
    margin: 0 0 100px; /* bottom = footer height */
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 0;
  /*ADDED*/
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  /*ADDED*/
}

.links-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  background-color: map.get($primary-dark, 10);
}

.links {
  display: flex;
  justify-content: space-between;
  min-width: 500px;
}

.horizontal-separator {
  width: 1px;
  background-color: map.get($typography-grey, 100);
}

.footer-links {
  color: map.get($typography-grey, 100);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.copyright-container {
  width: 100%;
  height: 60px;
  background-color: map.get($primary-dark, 20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright-wrapper {
  width: 1140px;
}

.copyright {
  font-size: 12px;
  color: map.get($typography-grey, 100);
}

.top-btn {
  background-color: map.get($secondary-red, 100);
  width: 86px;
  height: 60px;
  border-radius: 0;
  position: absolute;
  right: 0;
}

<main>
</main>

<div >
  <div >
    <div >
      <a href="/contact-us" >Contact Us</a>
      <div ></div>
      <a >Terms and Condition</a>
      <div ></div>
      <a  href="/">Privacy policy</a>
    </div>
  </div>
  <div >
    <div >
      <p >Other</p>
    </div>
    <button (click)="toTop()" mat-flat-button color="primary" >
      Top
    </button>
  </div>
</div>