css - 底部 Angular 粘性页脚

Question

我想在底部放置一个页脚。



出于某种原因，它会像这样出现。

在 index.html 中，我有:

<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>

粘不粘，这看起来不对。这里似乎有什么问题以及如何解决这个问题？

Answer 1

使用 position:fixed;bottom:0px; 在底部显示页脚

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>