底部有角度的粘性页脚

Question

I am trying to place a footer at the bottom .

and it is for some reason coming out like this.

In index.html, I have:

<main flex layout="column">
      <div>
        <div ui-view="" ></div>
      </div>
    </main>

    <footer>
      <md-toolbar class="md-hue-2 md-scroll-shrink">
        <div layout="row" layout-align="center center" flex>
          Powered by Webocity Technologies
        </div>
      </md-toolbar>

Sticky or not, this looks wrong. What seems wrong here and how to fix this?

Answer 1

Use position:fixed;bottom:0px; to display your footer at bottom

 footer{ position:fixed; bottom:0px; background-color:pink; width:100%; }

 <main flex layout="column"> <div> <div ui-view="" ></div> </div> </main> <footer> <md-toolbar class="md-hue-2 md-scroll-shrink"> <div layout="row" layout-align="center center" flex> Powered by Webocity Technologies </div> </md-toolbar> </footer>

Answer 2

There's loads of techniques to achieve this. One of my favourites is the one that doesn't need any fixed or absolute positioning (although totally valid) but setting the content to 100%. This will only work with a fixed footer height though.

<main flex layout="column">
  <div>
    <div ui-view="" ></div>
  </div>     
  <footer>
    <md-toolbar class="md-hue-2 md-scroll-shrink">
      <div layout="row" layout-align="center center" flex>
        Powered by Webocity Technologies
      </div>
    </md-toolbar>
  </footer>
</main>

And your CSS:

html, body {
  height: 100%;
  margin: 0;
}
[main] {
  min-height: 100%;
}
[footer] {
  height: 150px; // for this example, can be anything
  margin-top: -150px; // exact same value as the height
}

Answer 3

you can try with this css class in the footer.component.scss :

.footer {
    bottom: 0;
    padding: 19px 15px 20px;
    position: absolute;
    right: 0;
    color:  #98a6ad;
    left: 210px;
    background-color: #ffffff;
    box-shadow: 0 0 1px rgba(50,58,70,.1);

    .footer-links {
        a {
            color:  #98a6ad;
            margin-left: 1.5rem;
            transition: all .4s;
            &:hover {
                color: #323a46;;
            }
            &:first-of-type {
                margin-left: 0;
            }
        }
    }
}

I think the important ones are bottom:0; and position: absolute; , you can play around with them

And do not forget to put <footer class="footer"> in your HTML

BR,

Julian