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;在底部显示您的页脚

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

有很多技术可以实现这一目标。我最喜欢的一个是不需要任何fixed或absolute定位（尽管完全有效），但将内容设置为100％。这只适用于固定的页脚高度。

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

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

您可以在 for c in d: 中尝试使用此 css 类：

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; } } } }和bottom:0;，你可以玩玩他们

并且不要忘记将 position: absolute; 放在您的 HTML 中

BR,

朱利安

角底有粘性页脚

3 个答案: