底部有角的粘性页脚答案

【问题标题】：sticky footer at bottom in angular底部有角的粘性页脚
【发布时间】：2021-02-04 21:50:58
【问题描述】：

我正在尝试在底部放置页脚。

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

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

不管有没有粘性，这看起来是错误的。这里似乎有什么问题以及如何解决这个问题？

【问题讨论】：

标签： css angularjs

【解决方案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>

【讨论】：

【解决方案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
}

【讨论】：

【解决方案3】：

您可以在footer.component.scss 中尝试使用这个 css 类：

.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 中加入 <footer class="footer">

BR，

朱利安

【讨论】：